JavaScript原生拖放

用JS实现原生拖放的算法很简单：

①在鼠标按下时（目标元素上），在父元素上添加mousemove事件修改元素的left和top（元素的position可以是absolute也可以是relative，不过两种定位实现稍有区别，这里以absolute为例）；

②在鼠标放开时（父元素上）移除父元素上的mousemove事件即可实现拖放。

下面来看具体实现：

function drog(elem){ //将要拖动的元素作为元素传入
var doc = document.documentElement, //这里将整个HTML作为父元素，在父元素内拖动
src = {}, // 保存相应位置的两个对象，下面会说明他们的用处
pos = {};
elem.style.position = "absolute"; //将目标元素的定位设为absolute
elem.addEventListener("mousedown",function(){ //给目标元素添加mousedown事件
src.x = event.pageX - elem.offsetLeft; //记录鼠标在<span style="color:#ff0000;">目标元素内</span>的坐标
src.y = event.pageY - elem.offsetTop;
pos.x = elem.clientWidth - src.x; //记录鼠标距离目标元素的<span style="color:#ff0000;">右边界、下边界</span>的距离
pos.y = elem.clientHeight - src.y;
doc.addEventListener("mousemove",move); //给父元素添加mousemove事件
});
doc.addEventListener("mouseup",function(){ //当鼠标在父元素上触发mouseup事件时
doc.removeEventListener("mousemove",move); //移除父元素上的mousemove事件
});
function move(){//防止元素被拖出父元素，src、pos的作用便是在此
if(event.pageX >= src.x && event.pageX <= doc.clientWidth - pos.x){
elem.style.left = event.pageX - src.x + "px";
}
if(event.pageY >= src.y && event.pageY <= doc.clientHeight - pos.y){
elem.style.top = event.pageY - src.y + "px";
}
}
}

最后的效果： JavaScript原生拖放

还可以通过 cursor:move; 给目标元素添加拖动时光标变换的效果。