1. 首頁
  2. 問答
  3. 拖放沒有JQuery UI

拖放沒有JQuery UI

2012-02-24 118 views
15

我搜索了很多，找到一個教程拖動&與jQuery單獨（沒有UI），但由於JQuery UI的流行，所有拖放功能都基於JQuery UI。拖放沒有JQuery UI

任何人都可以給我一個提示如何使一個基本的拖動&由JQuery獨立下降？

來源

2012-02-24 Googlebot

+2

http://jsfiddle.net/tovic/mkUJf/ – fewtalks 2014-03-14 21:05:18

回答

7

我覺得一個很好的起點可能是繪製出流程，然後確定您需要爲每個用戶操作使用哪些jQuery工具。

使用戶進程可能是：

  • 點擊您的內容DIV上「拖動」區域
  • 拖動的內容，這將保持內容的div內
  • 釋放鼠標，這會將內容放入「可丟棄」容器中，該容器將調整先前內容的大小以適應可丟棄大小

需要以下類型的事件偵聽器：

  • 鼠標鬆開
  • 鼠標按下
  • 動畫

最低限度。另一種選擇可能是查看jQuery UI源代碼，並查看它們是如何實現的！哪個會告訴你到底該做什麼，但是你可以在需要時添加或修剪。

來源

2012-02-24 17:38:03 Evan

+0

感謝您瞭解過程。這將有所幫助！ – Googlebot 2012-02-24 17:57:47

2

遇到同樣的問題，只有可拖動和可拖放的縮小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'); 
    } 
    } 
});

來源

2012-08-14 22:38:57 tim

+0

你實際上不需要jqueryui css文件進行拖放 - 所以只是縮小的js是〜12k – Stephen 2016-03-14 22:13:55

1

我明白這是一箇舊的帖子，但我也有興趣做這個沒有JQuery UI。我查看了上面的鏈接，but i found this to be the best。它只有8kb的縮小（UI排序〜30，我讀過），並且獨立於任何龐大的JQuery庫（儘管這些可以讓我們的生活更容易）。

來源

2013-03-22 16:31:16 Todd

2

我發現這是非常有用的： http://draggabilly.desandro.com/

來源

2013-07-22 05:09:45

+0

無效鏈接。對不起 – knutole 2014-01-02 11:55:03

+1

真的嗎？似乎正在爲我工​​作！這裏的回購雖然：https://github.com/desandro/draggabilly – 2014-01-16 07:08:02

+0

是啊仍然死了，沒有迴應，對我來說 - 但感謝新的鏈接。 – knutole 2014-01-17 00:20:10

相關問題

 相關問題