摆脱内置拖动 html 元素

Question

当我拖动它们时，html 对象会移动，我有一个问题，你知道透明的“幽灵”-当你按住鼠标并拖动它时出现的元素的副本。 我的问题是它中断了我的鼠标事件。 我有一个图像，当您用鼠标拖动它时，它应该能够在 div 内移动。 我必须为此设置事件，第一个用于触发 mousemove 事件的 mousedown，mousemove 处理图像的移动。 mousedown 没问题，但是当我按下透明“幽灵”按钮移动鼠标时 - 元素的副本出现并中断我的 mousemove 事件。 有谁知道如何绕过或修复这个东西吗？

Answer 1

你能提供样品吗？

从表面上看，首先要检查的是事件是否已被击中。 每当每个事件触发时，将消息写出到console应该有助于证明或否定事件按预期发生。

Answer 2

然后启动 mousemove 事件，在 0 毫秒内为附加的 class 'hide' 设置超时。 这是工作。

 const dragAndDrop = () => { const card = document.querySelector('.dragDrop'); const cells = document.querySelectorAll('.block'); const dragStart = function () { // i added timeout for appended class setTimeout(() => { this.classList.add('hide'); }, 0); }; const dragEnd = function () { // i added timeout for appended class setTimeout(() => { this.classList.remove('hide'); }, 0); }; const dragOver = function (event) { event.preventDefault(); } const dragEnter = function (event) { event.preventDefault() this.classList.add('hovered'); } const dragLeave = function () { this.classList.remove('hovered'); } const dragDrop = function () { this.append(card); this.classList.remove('hovered') } cells.forEach((cell) => { cell.addEventListener('dragover', dragOver); cell.addEventListener('dragenter', dragEnter); cell.addEventListener('dragleave', dragLeave); cell.addEventListener('drop', dragDrop); }) card.addEventListener('dragstart', dragStart); card.addEventListener('dragend', dragEnd); } dragAndDrop()

 *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100%; height: 100vh; display: flex; justify-content: space-around; padding-top: 20px; }.block{ width: 100px; height: 100px; background-color: rgb(99, 99, 99); display: flex; justify-content: center; align-items: center; }.card{ width: 80px; height: 60px; background-color: black; cursor: grab; }.hide { display: none; }.hovered { background-color: rgb(254, 164, 164); }

 <div class="block"> <div draggable="true" class="drag dragDrop"> <div class="card"></div> <div class="text">Hello, world</div> </div> </div> <div class="block"></div> <div class="block"></div> <div class="block"></div>

Answer 3

我在 12 年前写了这篇文章，但如果我没记错的话，解决方案是这样的，

imageElement.addEventListener('dragover', function(e) {
  e.preventDefault()
});

这应该可以防止用户单击并拖动图像，这意味着浏览器不会添加任何视觉效果。