JQuery UI сортируемые портлеты: переключение мест двух портлетов

Question

Я довольно новичок в пользовательском интерфейсе JQuery и не очень хорошо разбираюсь в том, как использовать параметры, методы и события. Я использую портлеты Jquery UI Sortable (пример найден here), и то, что я делаю, довольно похоже на пример, у меня есть 3 столбца, но у меня только 1 портлет на столбец.

(here is a fiddle), и это является его основной HTML:

<div class="column"> 
    <div class="portlet"> 
     <div class="portlet-header">Feeds</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer  adipiscing elit</div> 
    </div> 
</div> 
<div class="column"> 
    <div class="portlet"> 
     <div class="portlet-header">Shopping</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
</div> 
<div class="column"> 
    <div class="portlet"> 
     <div class="portlet-header">Links</div> 
     <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> 
    </div> 
</div> 

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

Мои исследования привели меня к similar question без ответа, но я не нашел ответа на этот вопрос в любом месте.

Я знаю, что есть документация (найдено here) о JQuery UI для сортировки параметров, методов и событий. Я думаю, что именно здесь моя проблема может быть решена. Моя дилемма заключается в том, что я новичок в этих вещах и не знаю, с чего начать или куда идти. Я имею некоторое представление о том, какие события следует использовать, но я не уверен, как их использовать.

Я думаю, что over event был бы полезен, потому что я понимаю, что это скажет нам, что портлет был перенесен в новый столбец. Объект ui, который отправляется с событием over, имеет отправителя свойства, который сообщает нам, какой сортируемый портлет пришел; этот сортируемый должен быть местом назначения другого портлета, который уже был в столбце, который только что перенесен в портлет. Я также думаю, что свойство ui.item было бы полезно, так что если вы могли бы получить объекты jquery внутри столбца, вы можете узнать, какой из них недавно был добавлен, а какой уже был.

Это примерно так, насколько я понимаю.

Ваши ответы будут высоко оценены. :)

Answer 1

Эй, я нашел это с помощью моей сестры !!

var beforeDiv; 
$(".column").sortable({ 
    connectWith: ".column", 
    start: function (event, ui) { 
     beforeDiv = ui.item.closest('div.column'); 
    }, 
    beforeStop: function (event, ui) { 
     var afterDiv = ui.item.closest('div.column'); 

     beforeDiv.prepend(afterDiv.find(".portlet").not(".ui-sortable-placeholder").not(ui.item)); 
    } 
}); 

здесь скрипка: http://jsfiddle.net/FXrzN/45/