与jQuery.draggable（）等价的本机javascript

是否有与jQuery的draggable等价的本地javascript代码？ 我不需要所有的功能，但是

能够从控制柄拖动模式窗口

从头到尾 事件，因为我需要在拖动时创建覆盖层以防止 鼠标位于模态窗口内的iframe上

文档上只有一个可拖动项

---

使用事件

dragstart

和

dragend

。将模式的位置与鼠标的x和y坐标联系起来。

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

尽管问题是本地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

之后的事件需要绑定到

窗口

，以便在按住鼠标的同时离开原始元素时捕获这些事件

代码的“填充”部分是您需要检查元素的屏幕坐标与鼠标的屏幕坐标的对比，并适当地移动对象。只有在

mousemove

事件期间才真正需要移动鼠标，因为在

mouseup

或

mousedown

事件中鼠标不会移动

---

.

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

拖我
来找我

为什么不想使用jquery？当然，等价物是。。写下来。或者12万美元，只需将其加入您的网站，然后去吃午餐。老实说，这里的问题是什么？有人能给我写一些很棒的代码吗？我已经知道在哪里可以找到，而且是完全免费的，但我不想使用它。根本没有jQuery，或者只是没有

jQuery.draggable

？如果没有jQuery，完全支持浏览器将非常复杂；如果您可以使用straight jQ，请使用

.mousedown（）

和

.mouseup（）

和

.mousemove（）

。将开始

e.pageX

和

e.pageY

值与开始对话框位置一起存储，并使用增量移动内容。@Jere我正在将脚本注入一个没有任何控制权的文档中。它已经加载了JQ，但draggable不能与该版本一起使用。所以我再次尝试加载JQ，它破坏了一些现有的脚本。除了jQuery for

.draggable（）

，您不需要使用jQuery而不是原生JS吗？