使用JavaScript实现可拖动的DIV

Question

我想要制作可拖动的div，我知道可以使用Jquery插件来实现，但我不想使用，因为我只需要可拖动功能。那么我该如何实现可拖动功能呢？我已经尝试过以下方法：

$(document).ready(function(e){
                $("#eve").mousemove(function(e){
                    var p=$(this);
                    var offset = p.offset();
                    var ol=offset.left;
                    var ot=offset.top;
                    var l=e.pageX-ol;
                    var t=e.pageY-ot;
                    var eX=e.pageX;
                    var eY=e.pageY;
                    var htm="left:"+ol+" top:"+ot+"<br/>";
                    htm+="eX:"+eX+" eY:"+eY+"<br/>";
                    htm+="curX:"+l+" curY:"+t+"<br/>";
                    htm+="l:"+(ol-l)+" t:"+(ot-t);
                    p.html(htm);
                   p.css({left:((eX-3))+"px",top:((eY-3))+"px"});
                });

- Chetan Patel

---

你的代码是做什么的？HTML 长什么样子？ - powtac

在HTML中有一个DIV。 - Chetan Patel

为什么你不想使用jQuery UI呢？我建议你使用它，这样你就不会花费很多时间去做已经存在的东西了。 - Wizard of Ogz

@Aeolun 我不知道单个组件可以下载。 - Chetan Patel

在jqueryui.com的下载部分，您可以通过选择所需组件来创建自己的下载包。 - VisioN

Answer 1

这是我快速的 improvisation。也许这正是你正在寻找的。

$("div").on({
    mousemove: function(e) {
        var el = $(this);
        var data = el.data("down");
        if (data) {
            el.css({
                left: e.pageX - data.left,
                top: e.pageY - data.top
            });
        }
    },
    mousedown: function(e) {
        var el = $(this);
        var pos = el.offset();
        el.data("down", {
            left: e.pageX - pos.left,
            top: e.pageY - pos.top
        });
    },
    mouseup: function() {
        $(this).data("down", false);
    }
});​

DEMO: http://jsfiddle.net/UBKBb/

- VisioN

Answer 2

你需要定义多个函数来处理 mousedown 事件以开始拖动，mouseup 以停止拖动，并适当使用 mousemove 处理拖动时的移动，查看我找到的这个代码片段 https://gist.github.com/1330150。

- Valerij

---

我该如何将这个函数应用到我的元素上？ - Chetan Patel

请检查Gist的使用部分 - 前5行。 - Valerij