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

Im having multiple lists with several list elements, that are generated via javascript on load. So this is my structure :

    <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>

And I want to change the Order of the Element by Drag and Drop. But only inside of one list. So that Elements 1.1, 1.2, 1.3, 1.4 can be swapped but can not dragged into the second list to Elements 2.1/2.2.

I have tried the following example Tutorial for HTML5 drag&drop - sortable list

But this way I can drop the dragged element in any other list and for some reason it can be placed between image and text of another list element, replacing the previous one. Another idea was to add attributes to list elements and check if they are the same before performing the drop, but I cant figure out how to get an attribute of the selected element. So i deleted that again.

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;
    }

Sorry If I formatted something wrong in my Question, this is first time I ask something on stackoverflow :D

在这基础上的小修改,同级之间效果更好。

var _el;
function dragOver(e) {
    if ($(e.currentTarget).find('img').css('display') == 'none' || _el == e.currentTarget) return;
    if (isBefore(_el, e.currentTarget))
        e.currentTarget.parentNode.insertBefore(_el, e.currentTarget);
    else
        e.currentTarget.parentNode.insertBefore(_el, e.currentTarget.nextSibling);
    imgs_save()
}
function dragStart(e) {
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", null);
    _el = e.currentTarget;
}
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;
}

图片说明