JavaScript简单拖拽

        说到交互，基本上是在JavaScript语言中占据了大分量，JavaScript行为 为页面增添了光彩，而现在大多数网站都是运用交互式的，拖拽在交互这个大系统中也是很有重量的。

        把一个东西放在大盒子里移动拖拽，计算拖拽公式是非常重要的，基本上明白了拖拽公式就可以写出拖拽代码了。

       

        假设我们把物体1 拖拽到物体2 的地方，此刻可以知道拖拽的步骤是：先鼠标左键点到物体1 然后移动到物体2的地方，松开左键，完成拖拽。

        当点击的时候，可以通过事件源e.pagaX或者e.pageY获取到鼠标点击的位置，然后通过脚本化css可以获取到物体距离边界的top值和left值。假设物体1的深蓝线条点击处距离物体上边界disY，距离物体左边界为disX，即：disX = e.pageX - box.offsetLeft、disY = e.pageY - box.offsetTop。

        上面知道了鼠标点击位置距离物体上\左边界的距离大小，当移动的时候就必须要重新计算物体的top值和left值。即：box.style.left = e.pageX - disX + 'px'; box.style.top = e.pageY - disY + 'px';。这样物体就跟着你的鼠标移动了。

        我们封装一个拖拽方法。

 

var box = document.getElementById("box"),
    wrapper = document.getElementById('wrapper');
    function bindEvent(box,wrapper){
	var X,
	    Y,
	    boxL,
	    boxT,
	    disL,
	    disT,
	    drag = false;
        box.onmousedown = function(e){
	    drag = true;
	    var e = e || window.event;
	    X = e.pageX;
	    Y = e.pageY;
	    boxT = box.offsetTop;
	    boxL = box.offsetLeft;
	    disT = Y - boxT;
	    disL = X - boxL;
        }
	wrapper.onmousemove = function(e){
	    var e = e || window.event;
	    if(drag){
		    box.style.left = e.pageX - disL + 'px';
		    box.style.top = e.pageY - disT + 'px';
	    }
        }
	box.onmouseup = function(){
	    drag = false;
	}
}
bindEvent(box,wrapper);	

        好好的理解一下拖拽的鼠标点击时的位置对物体上左边界的距离，这样简单的拖拽是不难写出来的。

        --主页传送门--