没有使用jQuery UI实现可拖动的div

Question

没有使用jQuery UI实现可拖动的div

jqueryhtmldraggable

64

我正在尝试使一个 div 具有可拖动性，但不使用 jQuery UI。

然而，我被下面的代码困住了。我知道应该使用鼠标相对于容器 div 的位置（在其中 div 将被拖动），并且我应该设置 div 的偏移量相对于这些值。

我只是想不出如何做到这一点。有什么提示吗？

这是当然不起作用的代码：

var X, Y;

$(this).mousedown(function() {
    $(this).offset({ 
        left: X, 
        top: Y
    });
});

$("#containerDiv").mousemove(function(event) {
    X = event.pageX;
    Y = event.pageY;
});

- holyredbeard

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- John Berg · Answer 1

这是我的简单版本。
可拖动的函数需要一个jQuery对象作为参数。


/**
 * @param {jQuery} elem
 */
function draggable(elem){

    elem.mousedown(function(evt){
        var x = parseInt(this.style.left || 0) - evt.pageX;
        var y = parseInt(this.style.top || 0) - evt.pageY;

        elem.mousemove(function(evt){
            elem.css('left', x + evt.pageX);
            elem.css('top', y + evt.pageY);
        });
    });

    elem.mouseup(off);
    elem.mouseleave(off);

    function off(){
        elem.off("mousemove");
    }
}

- thezillion · Answer 2

这里有一个完全不使用jQuery的实现 -
http://thezillion.wordpress.com/2012/09/27/javascript-draggable-2-no-jquery

在你的HTML代码中嵌入JS文件(http://zillionhost.xtreemhost.com/tzdragg/tzdragg.js)，并放置以下代码 -

<script>
win.onload = function(){
 tzdragg.drag('elem1, elem2, ..... elemn');
 // ^ IDs of the draggable elements separated by a comma.
}
</script>

而且这段代码也很容易学习。
http://thezillion.wordpress.com/2012/08/29/javascript-draggable-no-jquery