本机 javascript 等效于 jQuery.draggable()答案

【问题标题】：Native javascript equivalent to jQuery.draggable()本机 javascript 等效于 jQuery.draggable()
【发布时间】：2011-10-17 01:28:45
【问题描述】：

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

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

【问题讨论】：

html5doctor.com/native-drag-and-drop你为什么不想使用jquery？
当然，等价的就是..写吧。或 120k 只需将其添加到您的网站并去吃午饭。老实说，这里的问题是什么？谁能给我写一些我已经知道在哪里可以找到并且完全免费但不想使用的很棒的代码？
根本没有 jQuery，还是没有 jQuery.draggable？完全没有 jQuery 的浏览器支持将是相当复杂的；如果可以直接使用 jQ，请使用 .mousedown() 和 .mouseup() 和 .mousemove()。存储起始 e.pageX 和 e.pageY 值以及起始对话框位置，并使用增量来移动内容。
@Jere 我将我的脚本注入到我无法控制的文档中。它已经加载了 JQ，但可拖动不适用于该版本。所以我尝试再次加载 JQ，它破坏了一些现有的脚本。
除了 jQuery 之外，您是否还需要 jQuery UI 才能使 .draggable() 工作（使用 jQuery，而不是原生 JS）？

标签： javascript jquery drag-and-drop draggable

【解决方案1】：

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

【讨论】：

【解决方案2】：

有 HTML5 dnd api，但由于没有人以任何方式喜欢它，并且没有旧浏览器支持它，我想说你在 jQuery 中找到了一个很好的解决方案。

【讨论】：

【解决方案3】：

虽然问题说明了本机 JavaScript，但鉴于 @Moe Sweet 评论说 jQuery 已已启用，我将作出回应。

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

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

鼠标按下，启用拖动
鼠标移动，继续拖动
松开鼠标，禁用拖动

简单的解决方案是使用这些事件：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 事件中移动。

【讨论】：

【解决方案4】：

使用看起来比 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>

【讨论】：