javascript - 如何通过js实现最简单的draggable？

Question

目前jquery ui的draggable有26kb，稍微有点大，想问一下高手该怎样来写一个能兼容所有浏览器的js实现draggable?

Answer 1

回题主，简单的draggable实现没有多复杂的，需要如下几个条件

1. 可移动的元素一定是定位元素（非static定位的）
2. 监听鼠标mousedown，mouseup 和 mousemove事件。
3. mousemove事件处理里获取 event 事件对象的 clientX 和 clientY属性, 通过style设置元素的 top 和 left

举例代码如下：

var IsMousedown, LEFT, TOP, obj;
document.getElementById("Mdown").onmousedown=function(e) {
    obj = document.getElementById("box");
    IsMousedown = true;
    e = e||event;
    LEFT = e.clientX - parseInt(login.style.left);
    TOP = e.clientY - parseInt(login.style.top);

    document.onmousemove = function(e) {
        e = e||event;
        if (IsMousedown) {
            login.style.left = e.clientX - LEFT + "px";
            login.style.top = e.clientY - TOP + "px";
        }
    }

    document.onmouseup=function(){
        IsMousedown=false;
    }
}

没什么特效，简单的draggable就是这么实现的，不贴demo了，题主自己写写看吧

Answer 2

不怪有人-1。这问题无异于“请帮我从头到尾写一个XX功能的程序，还要最简化掉”。

别费神自己写，查GitHub啊。比如说可以这样随便找一个。

值得注意的是，也许有必要看一下现有的工作是否基于jQuery UI。如果已经有了这个环境，那也就别怕个别模块再大一些了，用原生的模块总不是坏事。或者看一下是否已经用了jQuery，如果用了就找jQuery的插件来做这个。

还有个提示是“先实现再优化”。老生常谈了，不忘就行。

Answer 3

http://wujinzhilu.com/demo/learn/6/drag.html

比如这样