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>