拖放没有JQuery UI

Question

我搜索了很多，找到一个教程拖动&与jQuery单独（没有UI），但由于JQuery UI的流行，所有拖放功能都基于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

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

$('.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 4

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

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

Answer 5

我明白这是一个旧的帖子，但我也有兴趣做这个没有JQuery UI。我查看了上面的链接，but i found this to be the best。它只有8kb的缩小（UI排序〜30，我读过），并且独立于任何庞大的JQuery库（尽管这些可以让我们的生活更容易）。

Answer 6

我发现这是非常有用的： http://draggabilly.desandro.com/