Изменение порядка элементов списка за перетаскивание - PullRequest
0 голосов
/ 03 мая 2019

У меня есть несколько списков с несколькими элементами списка, которые генерируются через 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...