ライブイベントを使用したjQueryのドラッグアンドドロップ

Question

頻繁に変更される長いリストを持つアプリケーションがあり、そのリストのアイテムをドラッグできるようにする必要があります。

jQuery UIのドラッグ可能なプラグインを使用していますが、400を超えるリストアイテムへの追加が遅く、新しいリストアイテムが追加されるたびに再追加する必要があります。

jQuery 1.3の .live（）イベントを使用するjQuery UIドラッグ可能プラグインに似たプラグインを知っている人はいますか？これで両方の問題が解決します。

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

これは私にとって完璧に機能したコードのサンプルです

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

Answer 3

次のようなラッパー関数を作成できます：

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（）を配置しました）

そして、今では$（selector）.draggable（{opts}）の代わりにliveDraggable（selector、{opts}）を使用します

Answer 4

Stldougのコードは機能しましたが、マウスオーバーイベントごとに要素の.data（＆quot; init＆quot;）をチェックし続ける必要はありません。また、「mouseover」として「mousemove」を使用することをお勧めします。 .live関数の起動時にマウスが既に要素上にある場合、常にトリガーされるとは限りません。

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

使用方法は次のとおりです。

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

トリックは＆quot;：not（.ui-draggable）＆quot;を追加することですセレクターに。 jQueryは＆quot; ui-draggable＆quot;を自動的に追加するため、ドラッグ可能になったときに要素にクラスを追加すると、.live関数はその要素をターゲットにしなくなります。言い換えれば、あなたが物を動かしたときに何度もトリガーする他のソリューションとは異なり、一度だけトリガーします。

理想的には、単に「mousemove」をアンバインドできますが、残念ながら.liveでは機能しません。

Answer 5

@johnと@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（）が各要素で1回だけ呼び出されるようにします。また、 .on を使用すると、セレクターのスコープが縮小され、パフォーマンスが向上します。

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' });
});

注： live（）または delegate の代わりに on（）を使用できます。 on（）は他のものよりも優れたパフォーマンスを発揮します

Answer 7

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

JSFiddle

Answer 8

古い質問。ただし、threedubmediaには、ライブ（v 1.7以降、単に「オン」と呼ばれる）サポートを備えたドラッグアンドドロッププラグインがあります。 http://threedubmedia.com/code/event/drop あまり使用していないため、パフォーマンスなどを説明することはできませんが、合理的に見えます。

Answer 9

別のオプションは、マウスオーバーハンドラーとリムーバブルクラスを次のように混在させることです：

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

これはかなり簡単で、マウスオーバーしたときに何度も何度もバインドし直すことで、他の回答にある問題のいくつかを解決します。

Answer 10

廃止されたため、ライブを使用しない更新バージョン：

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