17

ドラッグ アンド ドロップを実装するために JQuery ライブラリを使用しています。

ソート可能なリストにドロップされたときにドラッグされている要素を取得するにはどうすればよいですか?

ドラッグされているdivのIDを取得したい。次の要素がドラッグされます。

<div class="control" id="control[1]" >
  <img src="img/controls/textfield.png" />
</div>

私は彼らの例から標準のドラッグ機能を持っています

$(".control").draggable({
  connectToSortable: '#sortable',
  helper: 'clone'
});

次のコードが適切な値を返すことで、セクションのドラッグで停止する関数

stop: function(event, ui) {
  alert(ui.helper.attr('id'));
}

そして、これはソート可能な要素です:

<ul id="sortable"><li>test</li></ul>

そして彼の機能：

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

うまくいかないように見えるさまざまな ui.id などを試しました。

receive: function(event, ui) { 
  $(ui.draggable).attr("id")
}

投げundefinedます。

更新：

申し訳ありませんが、私のせいです:)母がよく言っていたように、「コーディングする前にAPIを読んでください」。ui.item.attr('id')正常に動作します。

4

9 に答える 9

28

試す

receive: function(event, ui) { 
  $(ui.item).attr("id")
}

ドキュメントによると、 receive (実際には sortableのすべてのコールバック) は 2 つの引数を取得します。2 番目の引数には、次のものが含まれている必要があります。

  • ui.helper - 現在のヘルパー要素 (ほとんどの場合、アイテムのクローン)
  • ui.position - ヘルパーの現在位置
  • ui.offset - ヘルパーの現在の絶対位置
  • ui.item - 現在ドラッグされている要素
  • ui.placeholder - プレースホルダー (定義した場合)
  • ui.sender - アイテムの出所であるソート可能 (接続されたリストから別のリストに移動した場合にのみ存在します)
于 2009-03-19T12:11:53.370 に答える
8

イベントとイベントcontextで ui.item の が変わるようです。beforeStopreceive

私の場合、アイテムのIDを生成された値に設定しようとしています

receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);}

私にはうまくいきません

したがって、これを回避できます：

beforeStop: function (event, ui) { itemContext = ui.item.context;},
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);}
于 2010-08-18T15:49:16.320 に答える
2

同様の問題があり、開始イベントでヘルパー要素にアクセスするのに問題がありました。私がやったのは、カスタム HTML を返す関数にヘルパー属性を設定することでした。start イベントで問題なくその HTML にアクセスできました。

helper: function() {
    return '<div id="myHelper">This is my custom helper.</div>';
}
于 2009-04-01T15:18:45.163 に答える
1

はい、それはソート可能なものとドラッグ可能なもの、ドロップ可能なものなどを混在させる場合の問題です。ソート可能なコンテナーもドロップ可能にします:

$("#sortable").sortable({
  revert: true,
  accept: '.control',
  receive: function(event, ui) { 
    // here i need to get draggable element id
  }
});

$('#sortable').droppable({
    accept: '.control',
    drop: function(e, ui){
        var your_draggable_element = $(ui.draggable);
        var your_helper = $(ui.helper);
    }
});

それはうまくいくはずです

于 2011-04-08T00:28:50.560 に答える
1

jQuery UI のドラッグ可能なドキュメントから:

ドラッグするだけでなく、ドラッグ アンド ドロップが必要な場合は、ドラッグ可能オブジェクトのドロップ ターゲットを提供する jQuery UI Droppable プラグインを参照してください。

http://docs.jquery.com/UI/API/1.7/Droppableを参照してください

于 2009-03-19T12:13:32.587 に答える
1

ソート可能のbeforeStopイベントを使用して成功しました。

ここから

beforeStop : このイベントは、並べ替えが停止したときにトリガーされますが、プレースホルダー/ヘルパーがまだ利用可能な場合です。

$( "#something" ).sortable({
  beforeStop: function(event, ui) {
     //you should check if ui.item is indeed the one you want!
     item_id = $(ui.item).attr('id');
     $(ui.item).html('I'm changing the dropped element in the sortable!');
  }
});
于 2012-05-19T05:19:49.887 に答える
0

少しハッキーなようですが、うまくいきました！$('.dragrow1 li:last') を使用する必要があります

于 2010-01-20T16:24:43.423 に答える
0

カスタム データ属性を使用して、ドラッグされたアイテムの ID を格納できます。この属性は、ドロップされたアイテムにまだ存在します。ソースコードは次のとおりです。

<div class="..." data-id="item_id">
    ...
</div>

ソート可能で使用$('dropped item").data('id')して、次のような ID を取得します。

$("#sortable").sortable({
  ...,
  receive: function(e, ui) { 
      var id = ui.item.data('id');
  }
});
于 2012-09-13T08:35:52.193 に答える
-2 
$( "#sortable1" ).sortable({
  connectWith: ".connectedSortable",
  cancel: ".disabledItem",
  items: "li:not(.disabledItem)",
  receive: function(event,ui){

  **var page = ui.item.attr('value');**

  var user = $("#select_users").val();
于 2014-05-14T02:34:11.953 に答える