我正在尝试实现操作，我想将元素从 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() 调用？
最佳答案
鬼元素效果来自默认draggable <img>的属性(property)
使用ondragstart在图像上和 ondrop放在其他元素上就完美了。请参阅that exemple .
遗憾的是 rect 不支持它元素。您可以使用 onmouseover 做一些事情事件于 rect元素，但用户需要在放置后移动鼠标才能使其工作。
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具有完美解决方案的元素，您将需要使用 ondrop在 svg 上，您会发现 rect event.target下的元素see documentation here .
祝你好运!
关于javascript - JS - 通过 PreventDefault 调用启用幽灵元素效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53378472/