jquery: как обновить перетаскиваемый идентификатор клона?

Я хочу добавить перетаскиваемые элементы в сортируемый список, который отлично работает в моем примере на http://jsbin.com/ipese5/35

Проблема в том, что я хочу обновить идентификатор клонированного элемента при перетаскивании в сортируемый список. Странно то, что следующий код обновляет идентификатор до «new-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>

jquery jquery-ui jquery-ui-draggable jquery-ui-sortable
person Huub    schedule 26.04.2011    source источник

Ответы (2)


arrow_upward
13
arrow_downward

В событии receive вы не можете получить доступ к фактическому элементу, который создается в сортируемом списке. Помощник указывает на клон, который используется только для перетаскивания, элемент — это исходный элемент, на который вы нажали, чтобы перетащить.

Но событие 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();
  }
});​
person James Montagne    schedule 03.05.2011
comment
Это верно. Было бы более полным указать, что ui.item — это вставляемый элемент, а ui.helper — это помощник из вашего перетаскиваемого объекта, который по-прежнему будет иметь исходные атрибуты. - person Gabriel Hurley; 29.05.2011

arrow_upward
0
arrow_downward

Это просто, но работает:

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