等同于jQuery.draggable()的原生javascript

Question

是否存在与jQuery的可拖动性等效的原生javascript代码？我不需要所有的特征，但是

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

。

Answer 1

使用events dragstart和dragend。绑定与鼠标的x和y坐标相关的模态位置。

Answer 2

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

Answer 3

尽管这个问题说明了原生JavaScript，但考虑到@Moe评论说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事件移动。

There is a similar question where I posted my code for a jQuery.dragondrop plugin。