现在项目中需要实现一个自由拖拽插入的功能，类似于下面这样
在网上找了一下发现没有类似的功能，都不是利用drag和drop实现的，而本人强迫症发作，必须用这两个方法实现，现在做出了大概的功能：
首先，拿到这个需求的思路就是利用拖拽，拖拽事件中有三个值得一提的，ondrop，ondragstart，ondragover,这三个事件的意思分别是放置、开始移动、在...上移动，要弄懂这三个事件要在控制台中打印出来，看他们分别有什么属性； 在最开始，我因为一直想获取鼠标的位置，而一直使用mousemove事件，后来发现其实上面的三个拖拽事件都是可以获取鼠标位置的。。
这方面的亏希望大家不要再吃！
首先我们要在开始移动时ondragstart事件中创建一个新的div，放在列表中，这个时候的div只是一个占位符，只有当drop事件发生时，才能将真正的div插入到列表中。
在ondragover事件发生时，需要进行一系列计算，得出div应该插入的正确位置，这其中涉及鼠标位置、元素位置、页面滚动距离，需要有一定的耐心，才能得出想要的结果，我属于没有耐心的。。
在ondrop事件发生时，我们需要删除占位符div，插入真正div
<!doctype html>
<html>
<head>
<title>这是一个Demo</title>
<style>
.no-select{
float:left;
width:100px;
height:20px;
background-color:yellow;
text-align:center;
line-height:20px;
margin:20px;
}
.select>div{
width:500px;
height:50px;
border:1px dashed black;
margin:20px auto;
}
.select{
width:700px;
min-height:300px;
padding:100px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
var tempDiv;
document.getElementById("select").addEventListener("drop",function(ev){
ev.preventDefault();
console.log("s");
var div = document.createElement("div");
div.style.backgroundColor = "red";
console.log($(".miao"));
document.getElementById("select").insertBefore(div,$(".miao")[0]);
tempDiv.remove();
})
document.getElementById("select").addEventListener("dragover",function(ev){
ev.preventDefault();
var $main = $('.select div'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
tempDiv = $(".miao"); //获得临时 虚线框的对象
for(let i = 0;i < $main.length; i++){
let x = $main[i].getBoundingClientRect().left;
let y = $main[i].getBoundingClientRect().top;
if (ev.clientY > y && ev.clientY < (y + 50) ) {
tempDiv.insertBefore($main[i]);
}
}
});
document.getElementsByClassName("no-select")[0].addEventListener("dragstart",function(ev){
ev.dataTransfer.setData("Text",this.innerText + "+" + this.className);
var div = document.createElement("div");
div.style.backgroundColor = "red";
div.className="miao";
div.style.opacity = "0.2";
document.getElementById("select").appendChild(div);
});
document.getElementsByClassName("no-select")[0].addEventListener("mousedown",function(ev){
});
}
</script>
</head>
<body>
<div style="overflow:hidden" class="">
<div class="no-select" id="1" draggable="true">1</div>
<div class="no-select" id="2" draggable="true">2</div>
</div>
<div class="select" id="select">
<div class="oneInSelected" id="oneInSelected"></div>
<div></div>
<div></div>
</div>
</body>
</html>现在只是放上最雏形的代码，待项目完善之后我会放出完善代码以及页面效果~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。