Javascript鼠标拖动面板的制作【思路及注意点】

先来看看效果：拖动面板演示效果

HTML结构很简单，一个大的div包含三个小的div 如图：

然后开始思考如何来写鼠标拖动实现的代码。

1. 点击到标题才能拖动.
2. 标题被点击后，触发点击事件，同时给点击事件绑定鼠标移动事件。
3. 当鼠标移动时，将面板也按照鼠标的位置进行移动。
4. 鼠标松开后，清空鼠标移动事件。

这是大方向的思路，然后我们细化一下。

1. 标题被点击，首先要获取到class=”text”的第一个元素，设置onclick事件。
2. 绑定的鼠标移动事件中，首先得到鼠标的位置，然后得到面板的位置，需要进行一点运算看看让面板怎样移动，这个后面会详解。
3. 对于最后清空鼠标移动事件：标题鼠标松开时触发onmouseup事件，此时将页面的onmousemove设置为null就清空了。
   4.由于getelementsByClassName在低于IE10的版本下不支持，所以我们需要封装一个用className获取元素的方法。

OK，思路有了，开始写代码。

首先封装用className获取元素的方法，因为我们后面会用到，具体写法如下。

function getByClass('className','parent'){
    var oParent=parent? document.getElementById(parent):document,
    eles=[],
    elements=oParent.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className==className){
            eles.push(elements[i]);
        }
    }
    return eles;
}

这个方法传入两个参数className和parent，其中parent如果没有传入的话，就是body，这个方法最后返回一个数组。

然后

`window.onload=drag();`

开始编写drag()函数

function drag() {
var oTitle = getByClass('text','things')[0];
oTitle.onmousedown = fnDown;
oTitle.onmouseup = function(){  
        document.onmousemove = null;  
    }

}

首先获取到标题，也就是text的第一个元素，然后给标题绑定方法fnDown，在fnDown中我们会写鼠标移动时该怎么做，然后设置当鼠标松开时清空文档的鼠标移动事件。

鼠标按下时我们要做什么？获取鼠标的位置，面板的位置，然后确定如何移动面板。

鼠标的位置是 (event.clientX,event.clientY) 要获取面板的位置，我们先找到面板
var oDrag = document.getElementById('things');
面板的位置就是 (oDrag.offsetLeft,oDrag.offsetTop) 然后我们需要计算，鼠标移动时，面板的位置应该是什么。

用一张图来说一下：

可以看到，我们需要储存一下鼠标点击时与面板之间的位置关系，可以用event.clientX-oDrag.offsetLeft表示水平偏移量disX，用event.clientY-oDrag.offsetTop来表示垂直偏移量disY。

储存了偏移量之后，就很好做了，直接先将面板的位置设置为与鼠标相同，此时鼠标在面板的左上角，然后再根据偏移量将面板向左移disX，向下移disY就好了。

但是还要考虑到一点，移动的时候是不能移动到边框外的，比如这样：

想一下，假如向左向上移动出框了，那么event.clientX-oDrag.offsetLeft一定是负数，对于Top和clientY也是一样，所以我们要让xiaoyu0的时候都等于0 就是贴在了边框上。

然后向下，向右，只要最大不超过浏览器宽度即可。用clientWidth和clientHeight获取浏览器宽度，然后大于最大时，等于最大。

鼠标移动代码最终如下：

function fnDown() {
    var oDrag = document.getElementById('things'),
    disX = event.clientX-oDrag.offsetLeft,
    disY = event.clientY-oDrag.offsetTop;
    document.onmousemove=function(event) {
        event = event||window.event;
        move(event,disX,disY);
    }
}
function move(event,disX,disY) {
    var oDrag = document.getElementById('things'),
    l = event.clientX-disX,
    t = event.clientY-disY,
    winWidth = document.documentElement.clientWidth || document.body.clientWidth,
    winHeight = document.documentElement.clientHeight || document.body.clientHeight,
    maxW= winWidth-oDrag.offsetWidth,
    maxH = winHeight-oDrag.offsetHeight;
    if (l<0) {
        l = 0;
    }else if(l>maxW){
        l = maxW;
    }
    if (t<0) {
        t = 0;
    }else if (t>maxH) {
        t = maxH;
    }
    oDrag.style.left = l+'px';
    oDrag.style.top = t+'px';
}

其中对获取浏览器宽度和高度做了一下浏览器兼容处理，最后改变位置就设置oDrag.style.left和top属性。

OK，完成。

最终代码托管在coding上供网友参考：
https://coding.net/u/i_imT/p/TF_/git/blob/master/demo-drag.html

掏粪原创，转载请注明出处。 新浪微博ID：我叫掏粪i