Редактирование перетаскиваемого после его добавления в сортируемый

Эй, я пытаюсь понять, к какому событию мне нужно привязаться и какое свойство мне нужно использовать, чтобы получить ссылку на элемент DOM для отброшенного элемента (это элемент в списке получения.

Вот что у меня пока...

<ul id="toolbox">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<ul id="existing">
</ul>
<script language="javascript">
    $('#existing').sortable({
        revert: true
    });
    $('#toolbox li').draggable({
        connectToSortable: '#existing',
        helper: 'clone',
        revert: 'invalid',
    });
</script>

Моя цель состоит в том, чтобы превратить, например, A во что-то другое после того, как он попал в #existing ul (достаточно всего остального — реальная реализация намного сложнее. Мне просто нужно получить в свои руки этот элемент DOM).

Я пробовал следующее в качестве получения для моей сортировки:

function receive(ev, ui)
{
    $(this).append('<b>this</b>');
    ui.sender.append('<b>sender</b>');
    ui.item.append('<b>item</b>');
}

Но это, похоже, #existing UL, отправитель и элемент — это li, которые были перетащены в панель инструментов. Что я ищу, так это недавно созданный li внутри #existing. Есть ли недвижимость или другое событие, которое даст мне то, что мне нужно?


javascript jquery draggable jquery-ui jquery-ui-sortable
person fyjham    schedule 05.01.2010    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Недавно у меня была такая же проблема. Я решил это следующим образом:

$('#existing').droppable({
    drop: function(e, ui) {
        // ui.draggable is the node that gets created in #existing
        // ui.draggable[0].originDragger is the node that was 
        // dragged from #toolbox
    }
}).sortable({
    revert: true
});
person Justin Johnson    schedule 05.01.2010
comment
Эй, спасибо за информацию, я не знал, что вы можете сложить droppable на sortable, чтобы получить дополнительные события. В конце концов я применил другой такт, поместив класс CSS в источник, который я мог бы обнаружить и удалить после его перемещения, но это более чистый ответ, и я, вероятно, вместо этого рассмотрю его реализацию, если у меня будет время. - person fyjham; 06.01.2010
comment
Привет, Джастин, это интересная комбинация, но в моем случае дроп вызывается дважды — я думаю, и для сброса в сортируемое, и для сброса в самом сортируемом. Вы испытываете то же самое? Вы можете увидеть это на этом простом примере: jsfiddle.net/NPC42/8JVrp/4. - person NPC; 16.01.2012

arrow_upward
1
arrow_downward

Я не пробовал ни один из них, но в теории кажется, что они будут работать. Во-первых, если вы сделали ul#existing также удаляемым, вы могли бы что-то сделать с событием drop, например как получить необходимую информацию из этого li, например, text(), удалить этот объект из DOM и создать новый элемент.

Оррр, вы можете что-то сделать с событием stop вашего перетаскиваемого объекта, например, проверить, являются ли родительские элементы теперь ul#existing. Надеюсь это поможет.

person munch    schedule 05.01.2010

arrow_upward
0
arrow_downward

не привязывайтесь к sortreceive, вместо этого привязывайтесь к sortout вот так

$("#sortable").bind('sortout', function(event, ui) {
 console.log(ui.item);
});

ИЛИ

$("#sortable").sortable({ //during initialization
  out:function(event, ui) {
     console.log(ui.item);
   }
 });

в этом случае ui.item будет элементом, который вы ищете

person ekhaled    schedule 05.01.2010
comment
SortOut — это когда что-то оставляет сортируемое. Я предполагаю, что вы имеете в виду привязать его к другому сортируемому, но в этом случае другая сторона является только перетаскиваемым (и намеренно не сортируемым), поэтому это не сработает. Спасибо хоть. - person fyjham; 06.01.2010