У меня есть несколько списков с несколькими элементами списка, которые генерируются через JavaScript при загрузке.Итак, это моя структура:
<div>
<ul>
<ul>
<li> element 1.1 </li>
<li> element 1.2 </li>
<li> element 1.3 </li>
<li> element 1.4 </li>
</ul>
<ul>
<li> element 2.1 </li>
<li> element 2.2 </li>
</ul>
</ul>
</div>
И я хочу изменить Порядок Элемента путем перетаскивания.Но только внутри одного списка.Таким образом, элементы 1.1, 1.2, 1.3, 1.4 можно поменять местами, но нельзя перетаскивать во второй список к элементам 2.1 / 2.2.
Я попробовал следующий пример Учебник для HTML5 drag & drop - сортируемый список
Но таким образом я могу удалить перетаскиваемый элемент в любом другом списке и по какой-то причине он можетнаходиться между изображением и текстом другого элемента списка, заменяя предыдущий.Другая идея состояла в том, чтобы добавить атрибуты к элементам списка и проверить, являются ли они одинаковыми перед выполнением удаления, но я не могу понять, как получить атрибут выбранного элемента.Поэтому я удалил это снова.
function _make_drag_li($ds, $category){
return "<li draggable='true' ondragover='dragOver(event)' ondragstart='dragStart(event)' data-boxtype='$category' ondrop='drop_handler(event)'>" .$editIcon."".$deleteIcon." ".$mytext."</li>";
}
javascript:
var _el;
function dragOver(e) {
if (isBefore(_el, e.target))
e.target.parentNode.insertBefore(_el, e.target);
else
e.target.parentNode.insertBefore(_el, e.target.nextSibling);
}
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("text/plain", null);
_el = e.target;
}
function isBefore(el1, el2) {
if (el2.parentNode === el1.parentNode)
for (var cur = el1.previousSibling; cur && cur.nodeType !== 9; cur = cur.previousSibling)
if (cur === el2)
return true;
return false;
}
Извините, если я отформатировал что-то неправильно в своем Вопросе, я впервые спрашиваю что-то о stackoverflow: D