Первая часть позволяет вам сначала перетащить элемент в сортируемый div, который работает нормально. Затем я хочу, чтобы этот div также стал сортируемым, чтобы я мог перетаскивать в них новые элементы (части).
Эта часть тоже работает нормально, за исключением случаев, когда вы переупорядочиваете элементы (более темные), это не позволит вам поместить часть обратно в него, пока вы не измените их порядок снова, или попробуйте вставить его в один из других элементов и вернуться к нему.
Это сложно объяснить, но вот скриншот: http://screencast.com/t/Ls2ksVY4Q
Демо находится по адресу: http://jsfiddle.net/9MXWp/
Вот соответствующий код:
$(document).ready(function() {
$('#the-grid').sortable({
tolerance: 'pointer',
update: function(event, ui) {
if( $(ui.item).has('.close').length == 0 ) {
$(ui.item).prepend('x');
}
$('.part-holder', ui.item).sortable({
tolerance: 'pointer',
update: function(event, ui) {
if( $(ui.item).has('.close').length == 0 )
$(ui.item).prepend('x');
}
});
}
});
$('#sidebar > ul > li.part').draggable({
helper: 'clone',
connectToSortable: '.part-holder',
addClasses: false
});
$('.drag-element').draggable({
revert: 'invalid',
helper: 'clone',
connectToSortable: '#the-grid',
addClasses: false
});
$('#update-list').click(updateList);
});
Перетащите Элемент 1 в промежуточную область.
Перетащите Элемент 2 в промежуточную область; поместите его перед элементом 1.
Перетащите Деталь внутрь элемента 1 . ☞ Иногда страница терпит неудачу прямо здесь. ☜ ☣
Перетащите Деталь внутрь Элемент 2 .
Теперь перетащите Элемент 2 за Элемент 1 . . 12217] ☞ Перетащите часть внутрь элемента 1 ; это не сработает. ☜ ☣
Перетащите часть внутрь элемента 2 ; он будет работать, и теперь Элемент 1 снова принимает части.