拖拽小插件

插件名称:myDrag

 

功能：对某个块级元素进行拖拽

 

兼容性：ie7或ie7以上，主流浏览器

 

关键代码：在鼠标点击的时候触发，获取鼠标离窗口的坐标client.x(client.y)，获取目标元素（要拖拽的元素）到窗口的距离offset.x(offset.y)。然后就可以计算出鼠标到目标元素的距离dis.x(dis.y)。

client = {
    x: e.clientX || e.touches[0].pageX,
    y: e.clientY || e.touches[0].pageY
},
offset = {
    x: getBounding(drag).left,
    y: getBounding(drag).top
},
dis = {
    x: client.x - offset.x,
    y: client.y - offset.y
}

getBounding方法，获取目标元素到窗口的距离，兼容ie的写法：

function getBounding(oDiv){
    var obj = oDiv.getBoundingClientRect(),
        top = doc.documentElement.clientTop,
        left = doc.documentElement.clientLeft;
    return {
        left:obj.left - left,
        top:obj.top - top,
        right:obj.right - left,
        bottom:obj.bottom - top
    }
}

当鼠标移动时获取鼠标的坐标，然后再减去dis.x的值和目标元素到窗口的左距离。

client = {
    x: e.clientX !== undefined ? e.clientX : e.touches[0].pageX,
    y: e.clientY !== undefined ? e.clientY : e.touches[0].pageY
},
l = client.x - dis.x - getBounding(toObj.parentNode).left,
t = client.y - dis.y - getBounding(toObj.parentNode).top;

鼠标一直在动,所以l一直在变。最后让l等于目标元素的style.left。

drag.style.left = l + 'px';
drag.style.top = t + 'px';

 实例化对象：

var mydrag = new myDrag("#drag",{
    left: "20%" || "100px" || 100,
    right: "20%",
    bottom: "20%",
    top: "20%",
    parentNode:document.getElementById("parent"),
    parentWidth:'40%',
    parentHeight:'50%',
    onDraw: function (){
        if(this.x > 0.5*(document.documentElement || document.body).clientWidth){console.log(13333);}
    }
});

left,right,bottom,top是停止拖拽的范围边界，例如left:'20%'，就是距离parentNode元素的20%的地方停止拖拽，left有三种写法%，px, 整数。

left: "20%" || "100px" || 100

parentNode为边界元素，默认为document;

parentWidth,parentHeight设宽高，默认100%。

onDraw为回调函数，拖拽完后触发。this为client对象，this.x(this.y)为鼠标的坐标。

 

调用getClient方法来获取鼠标的位置

var cliX = mydrag.getClient.x,
    cliY = mydrag.getClient.y;

 

下载Demo

 

参考资料：

http://jingyan.baidu.com/article/8cdccae960b041315413cdcd.html

http://www.cnblogs.com/leejersey/p/4127714.html

http://blog.csdn.net/freshlover/article/details/8985887

http://www.zhinengshe.com/video.html

http://blog.csdn.net/fswan/article/details/17238933

http://kb.cnblogs.com/page/129756/#chapter2

http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/

（完）