Question

我有多个带有多个列表元素的列表，这些列表元素是在加载时通过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>

我想通过拖放来更改元素的顺序。但仅在一个列表中。这样就可以交换Elements 1.1、1.2、1.3、1.4，但不能将其拖到Elements 2.1 / 2.2的第二个列表中。

我尝试了以下示例Tutorial for HTML5 drag&drop - sortable list

但是，通过这种方式，我可以将拖动的元素拖放到任何其他列表中，并且由于某种原因，可以将其放置在另一个列表元素的图像和文本之间，以替换先前的元素。另一个想法是将属性添加到列表元素，并在执行删除之前检查它们是否相同，但是我无法弄清楚如何获取所选元素的属性。所以我再次删除了。

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

每次拖放更改列表元素的顺序

0 个答案: