sortable - jquery ui section




jquery:如何更新可拖動克隆ID? (2)

receive事件中,您不能訪問在可排序列表中正在創建的實際項目。 幫助者指向只用於拖動的克隆,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();
  }
});​

我想添加可拖動的項目到一個可排序的列表,這在我的http://jsbin.com/ipese5/35

問題是,我想要更新克隆項目的ID時,拖動到可排序列表。 奇怪的是,下面的代碼更新到de-ui對像中的“new-id”的id(正如我可以在我的控制台中看到的那樣),但是id在實際的頁面html上沒有改變。 任何人都有解決方案?

$( "#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>

這很簡單,但工作:

$( '#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",
});






jquery-ui-draggable