关于拖拽运动的一些简单思路
其实电脑上用鼠标拖动一些图标，就是最直接的一些拖拽运动，我认为拖拽运动的最根本问题其实就是对物体的定位，鼠标的点击其实可以分解为两个运动，按下和抬起两个动作，当按下时就可以根据鼠标按下的坐标，将其定位到物体的位置上，这样在移动时，就可以根据鼠标点击时的位置，准确确定物体相对鼠标的位置，从而进行移动物体
由于这里不方便画图，就简单介绍一下原理。
下面还是通过一个小例子来说明:
<style type="text/css">
#div1{ width: 100px;height: 100px;background: red; position: absolute;}
div{ width: 10px;height: 10px;background: green;position: absolute; }
</style>
<script type="text/javascript">
window.onload = function(){
var iSpeedX = 0;
var iSpeedY = 0;
var oDiv = document.getElementById("div1");
oDiv.onmousedown = function(ev){
var oEvent = ev||event;
var disX = oEvent.clientX-oDiv.offsetLeft; //点击点的坐标减去物体距离左边的宽度，得到点击点相对物体左边界的距离
var disY = oEvent.clientY-oDiv.offsetTop; //点击点的坐标减去物体距离上边的宽度，得到点击点相对物体上边界的距离
document.onmousemove = function(ev){ //获取点击事件
var oEvent = ev||event;
var l = oEvent.clientX-disX; //在通过点击点的坐标减去相对物体边界的距离，就可以得到物体再可视区的坐标值，在进行定位即可
var t = oEvent.clientY-disY;
oDiv.style.left = l+'px';
oDiv.style.top = t+'px'; //拖拽由一个个点组成，方向由两个点决定
lastX = l-iSpeed;
lastY = t-iSpeed;
lastX=l;
lastY=t; //更新速度值
}
document.onmouseup = function(){
document.onmousemove=document.onmouseup=null;
}
};
};
</script>
<body>
<div id="div1">
</div>
</body>
这时比较简单的拖拽运动，主要的思想就是获取物体相对鼠标移动时的坐标值即可
