16

プロジェクトのベースとして、jQuery UI Draggable / Sortableデモ（http://jqueryui.com/demos/draggable/#sortable）を使用しています。<li>ソータブルがそれを受け取ったときにソータブルに複製されるへの参照を取得する必要があります。並べ替え可能な受信イベントを試しましたが、それは元のドラッグ可能なオブジェクトへの参照のみを提供し、<li>そのクローンは提供しません。

4

3 に答える 3

30

参照しているデモには、実際にはバグがあります。アイテムを下にドラッグすると、その兄弟の複製であるクローンがDOMに挿入されるので、注意してください（liこれについてバグが報告されましたが、その周りにアクティビティはありません）。id

私はこれを達成するためにいくつかのことをしました：

  1. 上で説明したデモの制限を回避するには、代わりに、 ：classにリンクされるドラッグ可能なアイテムにを適用します。sortable

    <ul>
    <li class="new-item ui-state-highlight">Drag me down</li>
</ul>

  2. 次の方法で要素を選択する代わりに、そのクラスのアイテムをドラッグ可能にしidます。

     $(".new-item").draggable({
     connectToSortable: "#sortable",
     helper: "clone",
     revert: "invalid"
 });

  3. 並べ替え可能なstopイベントを利用し、ドロップされたアイテムについていくつかの簡単なロジックを実行します。このクラスのアイテムはnew-itemドロップされただけであるという事実を利用します（そして、並べ替え可能なアイテムの既存のアイテムではありません）。

    $("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if (ui.item.hasClass("new-item")) {
            // This is a new item
            ui.item.removeClass("new-item");
            ui.item.html("<b>HI</b>");
        }
    }
});

data-*ヘルパークラスを追加する代わりに、属性を使用できることに注意してください。

実例は次のとおりです：http：//jsfiddle.net/andrewwhitaker/twFCu/

お役に立てば幸いです。

于 2011-02-12T01:59:23.423 に答える
1

また、アイテムを削除するためだけにそのアイテムを取得するための別の非常に大まかな方法​​が必要な場合は、ドロップで次のように参照してください。

var _clone = $(".ui-draggable-dragging");

もちろん、そのクラスはドロップの直後に削除されるため、参照が失われ、すぐに実行できないことはできません。

上記の答えはより堅牢ですが、あなたが狂ったように急いでいるなら...

于 2012-09-08T17:27:30.927 に答える
1

の内部状態にアクセスすることを恐れない場合Sortableは、次のようにすることができます。

$('#sortable').sortable({
  receive: function() {
    // Sortable.currentItem refers to the item just added.
    // jQuery UI < 1.10 uses "sortable" as its data key,
    // jQuery UI >= 1.10 defines an "instance" method to get the current instance.
    var $item =
      (
        $('#sortable').data('sortable') || // jQuery UI < 1.10
        $('#sortable').sortable('instance') // jQuery UI >= 1.10
      ).currentItem;
  }
);

フィドル： http： //jsfiddle.net/t33bt/12/

ただし、これは公式APIを使用しないため、将来のjQueryUIバージョンでは機能しなくなる可能性があることに注意してください。ただし、それでもjQuery UI 1.11（この記事の執筆時点での現在のバージョン）でも機能します。

于 2015-06-18T12:46:43.977 に答える