在没有JQuery UI的情况下拖放

我经常搜索一下jQuery的拖放教程（没有UI），但由于JQuery UI的普及，所有的拖放function都基于JQuery UI。

任何人都可以给我一个提示如何通过JQuery独立进行基本的拖放操作？

Answer 1

我认为一个好的起点可能是制定流程，然后决定每个用户操作需要使用哪些jQuery工具。

所以用户进程可能是：

• 在“可拖动”区域单击您的内容div
• 拖动内容，这将内容保留在div中
• 释放鼠标，将内容放入“可放置”容器中，该容器将调整先前内容的大小以适合可放置的大小

需要以下类型的事件侦听器：

• 鼠标松开
• 鼠标按下
• 活跃

至少。 另一种选择可能是检查jQuery UI源，看看他们是如何做到的！ 这将告诉你究竟该做什么，但你可以添加到它或必要时修剪。

Answer 2

您可以使用几个插件来查看以下内容

http://wayfarerweb.com/jquery/plugins/animadrag/

http://threedubmedia.com/code/event/drag/demo/

它仍然是jquery但没有UI

Answer 3

http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

看到这个。 它是核心JS，易于实现。

Answer 4

我发现这个非常有用： http ： //draggabilly.desandro.com/

Answer 5

遇到同样的问题，33.4千字节的缩小jqueryUI只有draggable和droppable对于我需要的有限function来说太大了。 下面的方法不是工作代码 – 它只是一个简单的结构，可视化需要发生的事情。

$('.draggable').on{ mousemove : function(){ var mouseposition = { // this also needs to account for onclick offset of pointer vis-a-vis element x : pageX, y : pageY }; $(this).css({ top : mouseposition.y, left : mouseposition.y }); if( // this statement is kinda bogus, idea is to perform a collision detection via coordinate comparison $('.draggable').offset().top < $(.droppable').offset().top && $('.draggable').offset().left < $(.droppable').offset().left ) { alert('the item has been dropped'); } } }); 

Answer 6

我知道这是一篇旧post，但我也有兴趣在没有Jquery UI的情况下这样做。 我检查了上面的链接， 但我发现这是最好的 。 它只有8kb缩小（UI可排序~30，我读过），并且独立于任何庞大的JQuery库（尽管这些可以使我们的生活更轻松）。