在h5中有个拖拽的声明式命令，就如html属性一样，简单强大。
而在网页上拖拽的功能还是需求很大的，所以对这方面应该去仔细了解一下。
所以仿一一下它的实现。只是仿了它的复制一份到目标容器的功能。它还有很多功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.dragBox{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
.dragBox:after{
content: "";
display: block;
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #eee;
left: -20px;
top: 0px;
border-left:1px solid #ff7600;
border-top: 1px solid #ff4500;
transform: rotate(-10deg);
}
.dragBox:before{
content: "";
display: block;
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #eee;
right: 0px;
top: -20px;
border-left:1px solid #ff7600;
border-top: 1px solid #ff4500;
transform: rotate(90deg);
}
.target{
position: absolute;
top: 200px;
left: 50px;
width: 100%;
height: 100px;
}
.opacity{
opacity: .5;
}
.border{
border: 1px dashed #000;
}
.target01{
position: absolute;
top: 10px;
left: 0;
width: 80%;
height: 50px;
}
</style> <div class="dragBox target0"> </div> <div class="target">
<div class="target01"></div>
</div> <script>
/*容器位置*/
var posData=[{top:pos($(".target")).top,left:pos($(".target")).left,obj:$(".target"),placePosJudge:false},
{top:pos($(".target01")).top,left:pos($(".target01")).left,obj:$(".target01"),placePosJudge:false}];
function $(objStr){
return document.querySelector(objStr);
}
/*获取单个容器位置，相对于window的位置*/
function pos(obj,offset){
if(!offset){
offset={top:0,left:0};
}
offset.top+=obj.offsetTop;
offset.left+=obj.offsetLeft;
if(!obj.offsetParent){
return offset;
}
return pos(obj.offsetParent,offset);
}
(function(undefined){
var oDargBox=$(".dragBox");
var oDiv=$(".target");
document.onmousedown=function(e){
e=e||window.event;
if(e.target.className.indexOf("target0")!=-1){
var obj=e.target,
objClone=obj.cloneNode(true),
posX=e.clientX-obj.offsetLeft,
posY=e.clientY-obj.offsetTop,
index=-1;
objClone.classList.add("opacity");
document.body.appendChild(objClone);
document.onmousemove=function(e){
e=e||window.event;
var X=e.clientX-posX,Y=e.clientY-posY;
objClone.style.left=X+"px";
objClone.style.top=Y+"px";
/*使用碰撞检测来检测容器范围*/
for(var i=0;i<posData.length;i++){
if(posData[i].top<Y+100&&
Y<posData[i].top+300&&
posData[i].left<X+100&&
X<posData[i].left+300){
for(var j=0;j<posData.length;j++){
posData[j].placePosJudge=false;
}
posData[i].placePosJudge=true;
posData[i].obj.classList.add("border");
}else{
posData[i].obj.classList.remove("border");
}
}
}
document.onmouseup=function(){
objClone.classList.remove("opacity");
document.onmousemove=document.onmouseup=null;
for(var i=0;i<posData.length;i++){
posData[i].obj.classList.remove("border");
if(posData[i].placePosJudge){
posData[i].obj.appendChild(objClone);
objClone.style.position="relative";
objClone.style.top="0";
objClone.style.left="0";
return false;
}
} document.body.removeChild(objClone);
return false;
} }
}
})()
</script>
</body>
</html>