拖放沒有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/