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

Question

我有一些容器，想通过在容器之前插入被拖动的容器来操作 DOM，被拖动的容器被拖过来了。

意思是……这是当前位置

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

它看起来像这样

重要说明:我知道有 Jquery UI 并且它真的很容易使用，但我可能不会使用它。

所以我知道我可以使用 jquery 函数 .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;
}

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

有人介意帮我填充下面的空事件函数吗？

Answer 1

所以我终于明白了。如果有人想知道它是如何工作的，请使用这个 fiddle

$(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
}

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

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

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