web-dev-qa-db-ja.com

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

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

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

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

jqueryjquery-uidrag-and-dropdraggablelivequery
41
devongovett

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})
44
stldoug

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

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

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

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}）を使用します

10
wojtekk

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

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

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

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

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

理想的には、「mousemove」を単に.unbindすることができますが、残念ながら.liveでは動作しません。

7
john

@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を使用すると、セレクターのスコープが縮小され、パフォーマンスが向上します。

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

JSFiddle

1
yokesh ganesan

例：

トルコ語：

_<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()またはdelegateの代わりにlive()を使用できます。 on()のパフォーマンスは他のものよりも優れています

1
user1725620

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

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

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

0
Micah

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

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

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

0
Danny C