Jquery拖放 - 在其他容器之前插入拖动的div容器

Question

我有一些容器，想要通过在容器之前插入拖动的容器来操纵DOM，拖动的容器正在拖动。

意味着...... 这是当前的展示位置

现在我想把红色容器放在绿色容器之前

它会看起来这个

重要说明：我知道有Jquery UI，它非常易于使用，但我可能不会使用它。

所以我知道我可以使用jquery函数NOT_ALLOWED_TAG和.insertBefore()，但我正在努力处理拖动事件。

这是一个显示我当前工作的小例子

.insertAfter()

$(document).ready(function () { // add the events to the containers
    addDragDropToElement("divRed");
    addDragDropToElement("divBlue");
    addDragDropToElement("divGreen");
    addDragDropToElement("divYellow");
});

function addDragDropToElement(element) {
  var ele = $("#" + element);
  
    ele.prop("draggable", true); // make the div draggable

    ele.on('dragstart', function () {
        startDragging(event);
    });

    ele.on('dragenter', function () {
        enterDragging(event);
    });

    ele.on('dragover', function () {
        dragOver(event);
    });

    ele.on('dragleave', function () {
        leaveDragging(event);
    });

    ele.on('drop', function () {
        dropElement(event);
    });

    ele.on('dragend', function () {
        stopDragging(event);
    });
}

   var draggedElement = null;

function startDragging(e) {
    draggedElement = e.target;
}

function enterDragging(e) {

}

function dragOver(e) {
    e.preventDefault();
}

function leaveDragging(e) {

}

function dropElement(e) {
    e.preventDefault();
    var targetElement = e.target;

    $(draggedElement).insertBefore(targetElement);
}

function stopDragging(e) {

}

#divRed{background:red;}
#divBlue{background:blue;}
#divGreen{background:green;}
#divYellow{background:yellow;}

.container{
  width: 50px;
  height: 50px;
  display: inline-block;
}

有人会介意帮我填写下面的空事件功能吗？

Answer 1

所以我终于明白了。如果有人想知道它是如何运作的，那么这个小提琴

＆＃13;

＆＃13;

$(document).ready(function () {
    addDragDropToElement("divRed");
    addDragDropToElement("divBlue");
    addDragDropToElement("divGreen");
    addDragDropToElement("divYellow");
});

function addDragDropToElement(element) {
  var ele = $("#" + element);
  
    ele.prop("draggable", true);

    ele.on('dragstart', function () {
        startDragging(event);
    });

    ele.on('dragover', function () {
        dragOver(event);
    });

    ele.on('drop', function () {
        dropElement(event);
    });
}

var draggedElement = null; // the element that is dragged

function startDragging(e) {
    draggedElement = e.target; // store the dragged element
}

function dragOver(e) {
    e.preventDefault();
}

function dropElement(e) {
    e.preventDefault();
    var targetElement = e.target; // the element under the dragged element

    $(draggedElement).insertBefore(targetElement); // place the dragged element before the other element
}

＆＃13;

#divRed{background:red;}
#divBlue{background:blue;}
#divGreen{background:green;}
#divYellow{background:yellow;}

.container{
  width: 50px;
  height: 50px;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" id="divRed"></div>
<div class="container" id="divBlue"></div>
<div class="container" id="divGreen"></div>
<div class="container" id="divYellow"></div>

＆＃13;

＆＃13;

＆＃13;