jQuery UI - перемещение droppable в DOM

Я пытаюсь связать две сортировки вместе через промежуточные элементы с возможностью переключения. Однако я не могу переместить draggables внутри DOM изнутри события droppable.drop с помощью обычного метода appendTo.jQuery UI - перемещение droppable в DOM

Идея состоит в том, чтобы перетаскивать элемент из сортируемого в droppable, который имеет один и тот же атрибут data-tabid с сортировкой, и элемент отображается в соответствующей сортировке. Тем не менее, draggable возвращается на свое место в исходной сортировке и не перемещается в новую сортировку.

Я что-то упустил? Или есть более простой способ достичь этого?

HTML:

<div class="tab" data-tabid="10">Tab 1</div> 
<div class="tab" data-tabid="20">Tab 2</div> 

<div class="area" data-tabid="10"> 
    <div class="widget" data-id="1">Widget 1</div> 
    <div class="widget" data-id="2">Widget 2</div> 
    <div class="widget" data-id="3">Widget 3</div> 
</div> 

<div class="area" data-tabid="20"> 
    <div class="widget" data-id="4">Widget 4</div> 
    <div class="widget" data-id="5">Widget 5</div> 
    <div class="widget" data-id="6">Widget 6</div> 
</div>

Сценарий:

$('.tab').droppable({ 
    accept: '.widget', 
    hoverClass: 'drop-hover', 
    drop: function(event, ui) { 
     var widgetid = ui.draggable.data('id'); 
     var tabid = $(event.target).data('tabid'); 
     console.log('widgetid: ' + widgetid + '; tabid: ' + tabid); 

     var targetarea = $('.area[data-tabid="' + tabid + '"]'); 
     console.log('put widget:'); 
     console.log(ui.draggable); 
     console.log('in area:'); 
     console.log(targetarea); 

     ui.draggable.appendTo(targetarea); 

     console.log('---=== end drop ===---'); 
    } 
}); 

$('.area').sortable({ 
    items: '.widget' 
});

JSFiddle

источник

2015-06-23 Micah Loffer

цель только связать 2 sortables? Причина, если так, вы можете использовать параметр connectWith в своих сортировках, например: connectWith: '.area', и вам не понадобится ваш droppable –

. Цель состоит в том, чтобы показывать только одну сортировку в любой момент времени. Нажав на элементы управления вкладками, которые в настоящее время отображаются. Таким образом, единственный способ переместить виджеты между ними состоит в том, чтобы удалить сортировку на вкладку, которая имеет один и тот же вкладку с сортировкой. –

Я думаю, что это событие капли запуск слишком рано, после того, как успешная попытка падения сделана, поэтому событие падения но до того, как произойдет падение.

если изменить

ui.draggable.appendTo(targetarea);

setTimeout(function() {ui.draggable.appendTo(targetarea);},0);

работает

источник

2015-06-24 00:08:24 chiliNUT

jQuery UI - перемещение droppable в DOM

ответ

Смежные вопросы