У меня была похожая проблема, которая требовала гораздо более тщательного решения. Моя система перетаскивала элемент div слева, который содержал другие элементы div с именами и идентификаторами элементов формы, которые упали в сортируемый элемент div, который должен был стать веб-формой. Поскольку мне нужно, чтобы div справа был похожим на содержимое формы без дополнительной разметки, использование неупорядоченного списка не могло быть и речи, если только я не хотел делать кучу «очистки» на пути к базе данных. Нет, спасибо. В моем примере, когда я перетаскиваю из списка слева, мне нужно использовать идентификатор перетаскиваемого элемента, чтобы найти несколько вещей через ajax, а затем поместить метку, элемент формы и проверку в список на осталось на основе результатов этого AJAX. Для ясности я удалил ajax из моего примера.
Итак, по сути, вы берете два соседних элемента div, выполняя перетаскивание и сортировку со списком соединений. Ключ в том, что в Sortable есть функции обратного вызова, которые вы должны использовать. Обратный вызов «Receive» сработает только при добавлении нового элемента в сортируемый список. Это важно, потому что вы должны различать, чтобы ваши изменения не происходили и в сортировке. Вы не можете использовать только «получать», потому что, если вы попытаетесь манипулировать html в этом обратном вызове, вы затронете список, из которого вы перетаскиваете, а не список, в который вы перетаскиваете. Чтобы отслеживать, является ли это добавлением в список или перетаскиванием, я установил переменную с именем "newlement" в $ .data равной 1, если это добавление в список, который я затем проверяю в обратном вызове обновления, чтобы увидеть, должен ли я влиять на перетаскиваемый HTML или нет. В моем случае я не хочу ничего делать с перетаскиваемым элементом.
Итак, HTML:
<div class='master_list'>
<div id="2">First Name</div>
<div id="3">Last Name</div>
</div>
<div id="webform_container">
</div>
И JQuery:
$( ".master_list div" ).draggable({
connectToSortable: "#webform_container",
helper: "clone",
revert: "invalid"
});
$( "#webform_container" ).sortable({
revert: true,
cursor: 'pointer',
placeholder: "placeholderdiv",
connectWith: '.master_list',
start: function() {
/* Clear the value of newelement at start */
$(this).data('newelement', 0);
},
receive: function(event, ui) {
/* Get id from function and pass to the update to do stuff with */
$(this).data('id', ui.item[0].id);
/* Set value of newelement to 1 only when new element is added to list */
$(this).data('newelement', 1);
},
update: function(event, ui) {
/* If newelement ==1, this is a new element to the list, transform it */
if ($(this).data('newelement') == 1) {
var fieldname = ui.item.text();
ui.item.html('your new html here');
}
}
}); * +1011 *