与jQuery.draggable()等效的本地JavaScript方法

Question

是否有一种原生的JavaScript代码等同于jQuery的可拖动功能？ 我不需要所有的功能，只需要：

1. 能够从一个手柄中拖动模态窗口。
2. 在开始和结束事件上，我需要制作一个遮罩层，在拖动时防止鼠标停留在模态窗口内部的iframe上。
3. 文档中只会有一个可拖动的项目。

- Moe Sweet

---

为什么不想使用jQuery？http://html5doctor.com/native-drag-and-drop/ - Jere

当然，相当于...写下来。或者只需花费120k将其包含在您的网站中，然后去吃午餐。说实话，这里有什么问题？有人能为我编写一些伟大的代码，我已经知道在哪里找到它并且完全免费，但我宁愿不使用吗？ - Sinetheta

完全没有 jQuery，还是只是不用 jQuery.draggable？如果完全没有 jQuery，那么要考虑到所有浏览器的兼容性，会变得非常复杂。如果可以使用纯 jQ，请使用 .mousedown()、.mouseup() 和 .mousemove()。将起始的 e.pageX 和 e.pageY 值以及对话框的起始位置存储起来，然后使用差值来移动物品。 - N Rohler

@Jere 我正在向一个我无法控制的文档注入我的脚本。它已经加载了 JQ，但是 draggable 在那个版本上不起作用。所以我尝试重新加载 JQ，但它会破坏一些现有的脚本。 - Moe Sweet

@NRohler 只是没有可拖动的功能。JQ已经存在。 - Moe Sweet

你不需要在使用.draggable()时除了jQuery之外还需要jQuery UI吗？（使用jQuery而非原生JS） - Jared Farrish

Answer 1

使用事件dragstart和dragend。将模态框的位置与鼠标的x和y坐标相关联。

- alex

Answer 2

有HTML5的dnd API，但是因为我和谈话过的人都不喜欢它，而且旧版浏览器也不支持它，所以我认为你在jQuery中找到了一个好的解决方案。

- FloydThreepwood

Answer 3

使用HTML5的方法，它们似乎比jQuery更清晰：

<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>

- Kernel James

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 上，以便在鼠标按下时离开原始元素时能够捕获它们。

代码中的 "stuff" 部分是您需要检查元素的屏幕坐标与鼠标的屏幕坐标并适当移动事物的地方。只有在 mousemove 事件期间才真正需要运动，因为鼠标不会在 mouseup 或 mousedown 事件期间移动。 我发布了一个 jQuery.dragondrop 插件的类似问题的链接，您可以在那里查看我的代码。

- zzzzBov