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

所以我終於明白了。 如果有人想知道，它是如何工作的呢？

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