JS - 使用 preventDefault 调用启用幽灵元素效果
JS - Enable ghost element effect with preventDefault call
我正在尝试执行操作,我想将 img
标签列表中的元素拖到不同的 svg:rect
容器中。
使用 mousedown
和 mouseup
足以理解从列表中选择了哪个 img
以及删除了哪个 svg:rect
。
代码如下:
<body>
<div style="border: 1px solid black">
<svg width="300" height="100">
<rect id="container" width="60" height="60"></rect>
<rect id="container2" x="70" width="60" height="60" fill="salmon"></rect>
</svg>
</div>
<div id="list">
<img id="item" src="img/cat.png" width="64" />
</div>
<script>
const container = document.getElementById('container');
const container2 = document.getElementById('container2');
const item = document.getElementById('item');
let drag = null
item.addEventListener('mousedown', function (e) {
e.preventDefault();
console.log('mouse down from IMG');
drag = e.target;
});
container.addEventListener('mouseup', function (e) {
e.preventDefault();
console.log('Container 1', drag);
drag = null;
});
container2.addEventListener('mouseup', function (e) {
e.preventDefault();
console.log('Container 2', drag);
drag = null;
});
</script>
我的问题是 img
事件侦听器中的 e.preventDefault()
在用户拖动 img
时我失去了 幽灵元素效果 。
如何启用它并使用 preventDefault()
调用?
幽灵元素效果来自<img>
的默认draggable
属性
在图像上使用 ondragstart
并在其他元素上使用 ondrop
将是完美的。参见 that exemple。
很遗憾,rect
元素不支持它。您可以在 rect
元素上使用 onmouseover
事件做一些事情,但用户需要在放下鼠标后移动鼠标才能工作。
const container = document.getElementById('container');
const container2 = document.getElementById('container2');
const item = document.getElementById('item');
let drag = null
function dragImg (e) {
//e.preventDefault();
console.log('ondrag IMG');
drag = e.target;
};
// Not working
function ondrop1 (e) {
//e.preventDefault();
console.log('Container 1', drag);
drag = null;
};
// Not working
function ondrop2 (e) {
//e.preventDefault();
console.log('Container 2', drag);
drag = null;
};
<div style="border: 1px solid black">
<svg width="300" height="100">
<rect id="container" onmouseover="ondrop1(event)" width="60" height="60"></rect>
<rect id="container2" onmouseover="ondrop2(event)" x="70" width="60" height="60" fill="salmon"></rect>
</svg>
</div>
<div id="list">
<img ondragstart="dragImg(event)" id="item" src="https://ddragon.leagueoflegends.com/cdn/8.22.1/img/champion/Velkoz.png" width="64" />
</div>
[编辑] 如果你想继续使用 rect
元素和完美的解决方案,你需要在 svg 上使用 ondrop
并且你会在 event.target
see documentation here.
祝你好运!
经过一番搜索和测试,我想到了两种可能的解决方案:
第一个解决方案:根本不要使用html5拖放。
而是使用应用于拖动元素的 mousedown
和应用于放置元素的 mouseup
。在 mousedown
事件中需要调用 preventDefault()
。这消除了用户拖动时的幽灵元素效果。为了重新引入这种效果,您需要使用 css 属性 pointer-events: none
和 position: absolute
.
构建您自己的幽灵元素
第二种解决方案:使用部分拖放html5功能。
在拖动元素 (img) 上设置 dragstart
事件,在拖放元素 (svg) 上设置 drop
和 dragover
事件。检查 drop
事件中的 e.target
并且您有 svg:rect
元素的引用。
举个例子:
https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de
N.B. 记得添加其他事件并管理其他案例。
我正在尝试执行操作,我想将 img
标签列表中的元素拖到不同的 svg:rect
容器中。
使用 mousedown
和 mouseup
足以理解从列表中选择了哪个 img
以及删除了哪个 svg:rect
。
代码如下:
<body>
<div style="border: 1px solid black">
<svg width="300" height="100">
<rect id="container" width="60" height="60"></rect>
<rect id="container2" x="70" width="60" height="60" fill="salmon"></rect>
</svg>
</div>
<div id="list">
<img id="item" src="img/cat.png" width="64" />
</div>
<script>
const container = document.getElementById('container');
const container2 = document.getElementById('container2');
const item = document.getElementById('item');
let drag = null
item.addEventListener('mousedown', function (e) {
e.preventDefault();
console.log('mouse down from IMG');
drag = e.target;
});
container.addEventListener('mouseup', function (e) {
e.preventDefault();
console.log('Container 1', drag);
drag = null;
});
container2.addEventListener('mouseup', function (e) {
e.preventDefault();
console.log('Container 2', drag);
drag = null;
});
</script>
我的问题是 img
事件侦听器中的 e.preventDefault()
在用户拖动 img
时我失去了 幽灵元素效果 。
如何启用它并使用 preventDefault()
调用?
幽灵元素效果来自<img>
draggable
属性
在图像上使用 ondragstart
并在其他元素上使用 ondrop
将是完美的。参见 that exemple。
很遗憾,rect
元素不支持它。您可以在 rect
元素上使用 onmouseover
事件做一些事情,但用户需要在放下鼠标后移动鼠标才能工作。
const container = document.getElementById('container');
const container2 = document.getElementById('container2');
const item = document.getElementById('item');
let drag = null
function dragImg (e) {
//e.preventDefault();
console.log('ondrag IMG');
drag = e.target;
};
// Not working
function ondrop1 (e) {
//e.preventDefault();
console.log('Container 1', drag);
drag = null;
};
// Not working
function ondrop2 (e) {
//e.preventDefault();
console.log('Container 2', drag);
drag = null;
};
<div style="border: 1px solid black">
<svg width="300" height="100">
<rect id="container" onmouseover="ondrop1(event)" width="60" height="60"></rect>
<rect id="container2" onmouseover="ondrop2(event)" x="70" width="60" height="60" fill="salmon"></rect>
</svg>
</div>
<div id="list">
<img ondragstart="dragImg(event)" id="item" src="https://ddragon.leagueoflegends.com/cdn/8.22.1/img/champion/Velkoz.png" width="64" />
</div>
[编辑] 如果你想继续使用 rect
元素和完美的解决方案,你需要在 svg 上使用 ondrop
并且你会在 event.target
see documentation here.
祝你好运!
经过一番搜索和测试,我想到了两种可能的解决方案:
第一个解决方案:根本不要使用html5拖放。
而是使用应用于拖动元素的 mousedown
和应用于放置元素的 mouseup
。在 mousedown
事件中需要调用 preventDefault()
。这消除了用户拖动时的幽灵元素效果。为了重新引入这种效果,您需要使用 css 属性 pointer-events: none
和 position: absolute
.
第二种解决方案:使用部分拖放html5功能。
在拖动元素 (img) 上设置 dragstart
事件,在拖放元素 (svg) 上设置 drop
和 dragover
事件。检查 drop
事件中的 e.target
并且您有 svg:rect
元素的引用。
举个例子: https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de
N.B. 记得添加其他事件并管理其他案例。