是否有一种原生的JavaScript代码等同于jQuery的可拖动功能? 我不需要所有的功能,只需要:
- 能够从一个手柄中拖动模态窗口。
- 在开始和结束事件上,我需要制作一个遮罩层,在拖动时防止鼠标停留在模态窗口内部的iframe上。
- 文档中只会有一个可拖动的项目。
是否有一种原生的JavaScript代码等同于jQuery的可拖动功能? 我不需要所有的功能,只需要:
使用事件dragstart
和dragend
。将模态框的位置与鼠标的x和y坐标相关联。
有HTML5的dnd API,但是因为我和谈话过的人都不喜欢它,而且旧版浏览器也不支持它,所以我认为你在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>
尽管问题中提到了原生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
事件期间移动。
我发布了一个 jQuery.dragondrop 插件的类似问题的链接,您可以在那里查看我的代码。
jQuery.draggable
?如果完全没有 jQuery,那么要考虑到所有浏览器的兼容性,会变得非常复杂。如果可以使用纯 jQ,请使用.mousedown()
、.mouseup()
和.mousemove()
。将起始的e.pageX
和e.pageY
值以及对话框的起始位置存储起来,然后使用差值来移动物品。 - N Rohler.draggable()
时除了jQuery之外还需要jQuery UI吗?(使用jQuery而非原生JS) - Jared Farrish