jQuery拖放使用實時事件

Question

我有一個長列表的應用程序經常更改，我需要該列表的項目是可拖動的。

我一直在使用jQuery UI可拖動插件，但它添加到400多個列表項目的速度很慢，並且每次添加新列表項時都必須重新添加。

有誰知道類似於jQuery UI可插入插件的插件，它使用jQuery 1.3的.live()事件嗎？這將解決這兩個問題。

Answer 1

Wojtek的解決方案對我來說非常合適。彼時我改變它一點點位，使其擴展jQuery的...

(function ($) { 
    $.fn.liveDraggable = function (opts) { 
     this.live("mouseover", function() { 
     if (!$(this).data("init")) { 
      $(this).data("init", true).draggable(opts); 
     } 
     }); 
     return this; 
    }; 
}(jQuery)); 

現在與其說這是這樣的：

$(selector).draggable({opts}); 

...只需使用：

$(selector).liveDraggable({opts}) 

Answer 2

你可以做包裝函數是這樣的：

function liveDraggable(selector, options){ 
    jQuery(selector).live("mouseover",function(){ 
    if (!jQuery(this).data("init")) { 
     jQuery(this).data("init", true); 
     jQuery(this).draggable(options); 
    } 
    }); 
} 

（我用的樣機使用jQuery - 這就是爲什麼我把jQuery的（）而不是$（））

而且現在不是$（選擇）.draggable（{opts}）使用liveDraggable（selector，{opts}）

Answer 3

這是一個完美爲我工作的代碼示例

$('.gadgets-column').live('mouseover',function(){ 
    $(this).draggable(); 
}); 

Answer 4

Stldoug的代碼適用於我，但不需要在每個mouseover事件中都檢查元素的.data（「init」）。此外，最好使用「鼠標移動」，作爲「鼠標懸停」並不總是被觸發，如果你的鼠標已經在元素上時

(function ($) { 
    $.fn.liveDraggable = function (opts) { 
     this.live("mousemove", function() { 
      $(this).draggable(opts); 
     }); 
    }; 
}(jQuery)); 

的.live功能踢這裏是你如何使用它。

$('.thing:not(.ui-draggable)').liveDraggable(); 

訣竅是向選擇器中添加「：not（.ui-draggable）」。由於jQuery在可拖動時會自動將「ui-draggable」類添加到元素中，因此.live函數將不再以它爲目標。換句話說，它只觸發一次，而不像其他解決方案在你移動東西時反覆觸發。

理想情況下，您可以將.unbind「mousemove」，但不幸的是，.live不起作用。

Answer 5

一個古老的問題。但Threedubmedia已經通過實時拖放插件（從v 1.7開始，簡稱「on」）支持。 http://threedubmedia.com/code/event/drop 有沒有使用它，所以我不能說明它的性能等，但看起來合理。

Answer 6

一個例子：

土耳其：

<div id="diyalogKutusu"> 
    <div id="diyalog-baslik">..baslik..</div> 
    <div id="icerik">..icerik..</div> 
</div> 

$(document).on("mouseover", "#diyalogKutusu", function() { 
    $(this).draggable({ handle: '#diyalog-baslik' }); 
}); 

---

英語：

<div id="dialogBox"> 
    <div id="dialogBox-title">..title..</div> 
    <div id="content">..content..</div> 
</div> 

$(document).on("mouseover", "#dialogBox", function() { 
    $(this).draggable({ handle: '#dialogBox-title' }); 
}); 

注意：您可以使用on()，而不是live()或delegate。該on()有不錯的表現比其他

Answer 7

組合來自@約翰和@jasimmk最佳答案：

使用.live：

$('li:not(.ui-draggable)').live('mouseover',function(){ 
    $(this).draggable(); // Only called once per li 
}); 

.live是雖然過時，最好使用.on：

$('ul').on('mouseover', 'li:not(.ui-draggable)', function(){ 
    $(this).draggable(); // Only called once per li 
}); 

正如@john所解釋的那樣，.ui-draggable會自動添加到可拖動的方法中，所以通過使用選擇器排除該類，您可以確保僅在每個元素上調用一次draggable（）。並且使用.on將減少選擇器的範圍，從而提高性能。

Answer 8

$("html divs to drag").appendTo("#layoutDiv").draggable(options); 

JSFiddle

Answer 9

另一種選擇是一個可移動類混合的鼠標懸停處理程序，就像這樣：

$('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) { 
    $(this).draggable().removeClass('drag-unbound'); 
}); 

這是相當簡單，解決了一些問題，其他的答案有重隨着鼠標懸停一遍又一遍地重新綁定。

Answer 10

的更新版本，因爲它已被棄用並不住用：（！jQuery的（這一點）。數據（ 「初始化」））

function liveDraggable(selector, options) { 
    $(document).on('mouseover', selector, function() { 
     if (!$(this).data("init")) { 
      $(this).data("init", true); 
      $(this).draggable(options); 
     } 
    }); 
}