相当于 jQuery.draggable() 的原生 JavaScript

Question

是否有相当于 jQuery 的draggable 的原生javascript 代码？ 我不需要所有功能，但

1. 能够从手柄拖动模式窗口。
2. 在开始和结束时 事件，因为我需要在拖动时制作一个覆盖层以防止 鼠标位于模式窗口内的 iframe 上。
3. 文档上只有一个可拖动的项目。

Answer 1

使用事件 dragstart 和 dragend。将模态的位置与鼠标的 x 和 y 坐标联系起来。

Answer 2

有 HTML5 dnd api，但由于与我交谈过的人都不喜欢它，而且所有较旧的浏览器都不支持它，所以我想说您在 jQuery 中找到了一个很好的解决方案。

Answer 3

使用看起来比 jQuery 更干净的 HTML5 方法：

<div draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', '12345')">
drag me
</div>

<div ondragover="return false;" 
  ondrop="this.innerHTML=event.dataTransfer.getData('text/plain')">
drop on me
</div>

Answer 4

尽管问题指出的是原生 JavaScript，但考虑到 @Moe Sweet 评论说 jQuery 已启用，我将做出回应。

拖放是一个特定的事件链。这并不是非常困难，但可能具有挑战性。

简单地说，拖放是以下步骤/事件：

1. 鼠标按下，启用拖动
2. 鼠标移动，继续拖动
3. 鼠标松开，禁用拖动

简单的解决方案是使用这些事件： mousedown、mousemove 和 mouseup

$(anElement).mousedown(foodown);

function foodown(){
  $(window).mousemove(foomove).mouseup(fooup);
  //stuff
}

function foomove(){
  //stuff
}

function fooup(){
  //stuff
  $(window).unbind('mousemove', foomove).unbind('mouseup', fooup);
}

需要注意的一点是，mousedown 后面的事件需要绑定到 window 这样他们就会被抓住如果鼠标在按住时离开了原始元素。

代码的“东西”部分是您需要检查元素的屏幕坐标与鼠标的屏幕坐标并适当移动物体的地方。只有在 mousemove 事件期间才真正需要运动，因为在 mouseup 或 mousedown 事件中鼠标不会移动。

有一个类似的问题，其中我发布了 jQuery.dragondrop 插件的代码。