javascript - 当鼠标已经在元素上并且已经移动时，如何启用可拖动？

Question

我编写了代码，允许在鼠标在该元素上按下一段时间后拖动 HTML 元素。

问题是，当我使用 native HTML 拖放时，当超时结束时我启用了 draggable 属性(鼠标在该元素上停留了那段时间) ，如果在超时之前鼠标在按下时被移动，HTML 将不会触发 dragstart 事件，甚至不会开始拖动元素。

下面有一个例子。

var t;

function startDelayedDrag() {
  clearTimeout(t);
  document.getElementById('dragtarget').draggable = false;
  console.log('mousedown')
  t = setTimeout(function() {
    console.log('dragging enabled')
    document.getElementById('dragtarget').draggable = true;
  }, 1000);
}

.droptarget {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  user-select: none;
}

<div class="droptarget">
  <p onmousedown="startDelayedDrag()" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget"></div>

Answer 1

这很棘手，可能与您的想法不同，但这里有一个解决问题的方法:

1. 开始拖动事件
2. 通过使用 setDragImage 设置图像来隐藏拖动对象
3. 克隆拖动元素节点，隐藏克隆并将其添加到文档中(因为无法更改 setDragImage 设置的图像)
4. 启动超时改变ghost元素的可见性

这还可以在很多方面进行改进，但我认为您可以了解它的工作原理。作为引用，请参阅以下代码段:

const [$drag] = document.getElementsByClassName('drag')
const [$pixel] = document.getElementsByClassName('pixel')
let $ghost = null

$drag.addEventListener("dragstart", e => {
  // set the current draged element invisible
  e.dataTransfer.setDragImage($pixel, 0, 0)
  
  // create a ghost element
  $ghost = $drag.cloneNode(true)
  $ghost.style.position = "absolute"
  $ghost.style.display = "none"
  document.body.appendChild($ghost)

  setTimeout(() => {
    $ghost.style.display = 'block'
  }, 1000)
})

$drag.addEventListener("drag", e => {
  // keep the ghost position to follow the mouse while dragging 
  $ghost.style.left = `${e.clientX}px`
  $ghost.style.top = `${e.clientY}px`
}, false);

$drag.addEventListener("dragend", e => {
  // remove the ghost
  if ($ghost.parentNode) $ghost.parentNode.removeChild($ghost)
}, false)

.content {
  display: flex;
}

.box {
  width: 100px;
  height: 35px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #aaaaaa;
}

.drop {
  user-select: none;
}

.drag {
  text-align: center;
}

.pixel {
  width: 1px;
  height: 1px;
  background-color: white;
}

<div class="content">
  <div draggable="true" class="drag box">Drag</div>
  <div class="drop box"></div>
  <div class="pixel"></div>
</div>