6

http://jsbin.com/ipese5/35の例では、ドラッグ可能なアイテムを並べ替え可能なリストに追加したいと考えています。

問題は、並べ替え可能なリストにドラッグしたときに、複製されたアイテムの ID を更新したいことです。奇妙なことに、次のコードは de ui オブジェクトの id を "new-id" に更新しますが (コンソールで確認できます)、実際のページ html では id が変更されません。誰にも解決策がありますか？

$( "#init .block" ).draggable({
  helper: "clone",
  connectToSortable: ".list"
});

$(".list").sortable({
  connectWith: ".list",
  receive: function(event, ui) {
    $(ui.helper).attr("id","new-id");
    console.log(ui); 

    // surprisingly the next line works fine, but is not neccesary
    // $(ui.item).attr("id","new-id");
  }
});

<div id="init">
  <div id="new" class="block">Drag me</div>
  <div id="new" class="block">Drag me</div>
  <div id="new" class="block">Drag me</div>
</div>

<div class="list">
  <div class="block">Sort me</div>
  <div class="block">Sort me</div>
</div>
4

2 に答える 2

13

イベントではreceive、ソート可能なリストで作成されている実際のアイテムにアクセスできません。Helper は、ドラッグにのみ使用されるクローンを指します。item は、クリックしてドラッグした元のアイテムです。

ただし、beforeStop受信イベントの直前にイベントが発生します。beforeStop では、アイテムは実際にはリストに追加されるアイテムです。したがって、 beforeStop でアイテムを保存してから、受信で使用できます。

デモはこちら: http://jsfiddle.net/kcg29/

var newItem;

$(".list").sortable({
  connectWith: ".list",
  beforeStop: function (event, ui) { 
      newItem = ui.item;
  },
  receive: function(event,ui) {
      $(newItem).doSomething();
  }
});​
于 2011-05-03T03:06:56.393 に答える
0

シンプルですが、機能します：

$( '#init .block' ).draggable({
        connectToSortable: ".list",
        helper: "clone",
        start: function(event,ui){
            //get ID form draggable item 
            itemId = $(this).attr('id');
        },
        stop: function(event,ui){
            //assign ID to clone
            ui.helper.attr('id',itemId);
        }
    });

$(".list").sortable({
  connectWith: ".list",
});
于 2015-01-17T02:35:58.010 に答える