拖拽的原理很简单
1、第一步：需要基本的概念，需要这些事件：
onmousedown()鼠标按下、
onmousemove()鼠标移动、
onmouseup()鼠标抬起、
2、第二步：你需要了解事件的状态，也就是获取鼠标的位置：
window.Event ：代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
oEvent.clientX:获取鼠标的横坐标
！！！- CSS
<style>
.div1{width:200px;height:200px;background:rosybrown;position:absolute;}
</style>
！！！ - HTML
<div class="div1"></div>
！！！ - JavaScript
window.onload=function()
{
var div1=document.getElementsByClassName(‘div1‘)[0];
var l=0;
var t=0;
div1.onmousedown=function(ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-div1.offsetLeft;
var disY=oEvent.clientY-div1.offsetTop;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
l=oEvent.clientX-disX;
t=oEvent.clientY-disY;
div1.style.left=l+"px";
div1.style.top=t+"px";
}
document.onmouseup=function()
{
document.onmouseup=null;
document.onmousemove=null;
}
}
}
！！！ - JQuery
$(function(){
var l=0;
var t=0;
$(‘.div1‘).mousedown(function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-$(this).offset().left;
var disY=oEvent.clientY-$(this).offset().top;
$(document).mousemove(function(ev){
var oEvent=ev||event;
l=oEvent.clientX-disX;
t=oEvent.clientY-disY;
$(‘.div1‘).css(‘left‘,l);
$(‘.div1‘).css(‘top‘,t);
console.log(‘移动‘);
})
$(document).mouseup(function(){
$(document).off();
})
})
})*/
JS-JQ-拖拽
原文地址：http://www.cnblogs.com/xiaoyangtian/p/7922065.html