41

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

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

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

4

10 に答える 10

45

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})
于 2010-07-28T02:05:22.913 に答える
21

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

$('.gadgets-column').live('mouseover',function(){
    $(this).draggable();
});
于 2010-10-11T07:25:22.997 に答える
10

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

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

于 2010-04-13T21:21:02.280 に答える
7

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

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

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

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

トリックは、セレクターに ":not(.ui-draggable)" を追加することです。要素がドラッグ可能になると、jQuery は「ui-draggable」クラスを要素に自動的に追加するため、.live 関数はそれを対象としなくなります。つまり、物を移動すると何度もトリガーされる他のソリューションとは異なり、トリガーは 1 回だけです。

理想的には、「mousemove」を .unbind するだけで済みますが、残念ながら .live では機能しません。

于 2011-05-17T08:06:41.737 に答える
4

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

于 2013-07-18T20:51:01.650 に答える
1 
$("html divs to drag").appendTo("#layoutDiv").draggable(options);

JSFiddle

于 2013-12-04T12:20:51.827 に答える
1

例：

トルコ語:

<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()delegateon()

于 2012-10-08T00:44:03.270 に答える
0

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

于 2012-08-15T14:34:45.883 に答える
0

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

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

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

于 2014-10-29T20:20:52.643 に答える
0

廃止されたため live を使用しない更新バージョン:

function liveDraggable(selector, options) {
    $(document).on('mouseover', selector, function () {
        if (!$(this).data("init")) {
            $(this).data("init", true);
            $(this).draggable(options);
        }
    });
}
于 2014-12-07T17:07:47.683 に答える