如何使用jQuery通过鼠标移动div？

Question

我需要能够通过鼠标移动div，并将div的新位置存储在数据库中以记住显示位置。我该如何做？

- Bigballs

Answer 1

我强烈建议您了解jQuery UI和可拖拽交互。基本上，您需要将代码添加到可拖拽的div中（假设它具有id =“ draggable”）：

$("#draggable").draggable();

然后，在停止事件中添加必要的行为。更具体地说，你需要这样做：

$('#draggable').draggable({
    stop: function(event, ui) { ... }
});

关于存储数据库，你可以在上述函数中使用AJAX调用，也可以将其存储在页面中，这样一些表单提交或其他操作会导致位置信息传递到服务器并与其他数据一起内联存储。对于AJAX调用，我会小心处理，因为每次在任何浏览器上拖动时都可能向数据库发送位置数据。这取决于你的应用程序...

- alphadogg

---

没错，如果你不想搞浏览器测试和那些烦人的东西，这是最好的选择。我给它点赞 ;) - Ionuț Staicu

Answer 2

这里是我刚写的一个小jQuery函数，它允许你仅使用jQuery而不是jQuery UI 来拖动div元素。

/* PlugTrade.com - jQuery draggit Function */
/* Drag A Div with jQuery */
jQuery.fn.draggit = function (el) {
    var thisdiv = this;
    var thistarget = $(el);
    var relX;
    var relY;
    var targetw = thistarget.width();
    var targeth = thistarget.height();
    var docw;
    var doch;

    thistarget.css('position','absolute');


    thisdiv.bind('mousedown', function(e){
        var pos = $(el).offset();
        var srcX = pos.left;
        var srcY = pos.top;

        docw = $('body').width();
        doch = $('body').height();

        relX = e.pageX - srcX;
        relY = e.pageY - srcY;

        ismousedown = true;
    });

    $(document).bind('mousemove',function(e){ 
        if(ismousedown)
        {
            targetw = thistarget.width();
            targeth = thistarget.height();

            var maxX = docw - targetw - 10;
            var maxY = doch - targeth - 10;

            var mouseX = e.pageX;
            var mouseY = e.pageY;

            var diffX = mouseX - relX;
            var diffY = mouseY - relY;

            // check if we are beyond document bounds ...
            if(diffX < 0)   diffX = 0;
            if(diffY < 0)   diffY = 0;
            if(diffX > maxX) diffX = maxX;
            if(diffY > maxY) diffY = maxY;

            $(el).css('top', (diffY)+'px');
            $(el).css('left', (diffX)+'px');
        }
    });

    $(window).bind('mouseup', function(e){
        ismousedown = false;
    });

    return this;
} // end jQuery draggit function //

jQuery功能甚至可以防止div超出边界。基本上，您将其附加到一个div上，该div是您指定为拖动激活器（例如标题栏）。调用它就像这样简单：

$("#titleBar").draggit("#whatToDrag");

所以#titleBar将是您的标题栏div的id，#whatToDrag将是您想要拖动的元素的id。我为代码凌乱道歉，我只是随意编写它，并认为它会为您提供一种替代jQuery UI的方法，同时仍然很容易实现。

- PlugTrade

---

doch 应该使用 $(window).height() 而不是 $('body')，因为 body 只有填充内容的高度，可能不是整个窗口的高度。或者如果 body 高于窗口，则可以使用 body，如果您希望将 draggit 放在窗口视图下方。但无论如何都很棒！ - Alendri

正是我所需要的。除了@Alendri所说的之外，thistarget.width()和thistarget.height()应该使用outerWidth()和outerHeight()来补偿目标上的填充。 - Jargs

Answer 3

如果有很多对象，那么mousemove可能会变得昂贵。解决这个问题的一种方法是在mousedown上绑定处理程序，在mouseup上解除绑定。但是这个示例没有使用和测试多个对象;尤其是当前的解绑定了之前绑定的所有内容（可以通过为lambda表达式命名并在unbind中引用该名称来解决）。

jQuery.fn.dragdrop = function (el) {
    this.bind('mousedown', function (e) {
        var relX = e.pageX - $(el).offset().left;
        var relY = e.pageY - $(el).offset().top;
        var maxX = $('body').width() - $(el).width() - 10;
        var maxY = $('body').height() - $(el).height() - 10;
        $(document).bind('mousemove', function (e) {
            var diffX = Math.min(maxX, Math.max(0, e.pageX - relX));
            var diffY = Math.min(maxY, Math.max(0, e.pageY - relY));
            $(el).css('left', diffX + 'px').css('top', diffY + 'px');
        });
    });
    $(window).bind('mouseup', function (e) {
        $(document).unbind('mousemove');
    });
    return this;
};
$(document).ready(function () {
    return $('#obj').dragdrop('#obj');
});

或者在Parenscript中：

(setf (chain j-query fn dragdrop)                                                                                      
      (lambda (el)                                                                                                     
        (chain this                                                                                                    
               (bind :mousedown                                                                                        
                     (lambda (e)                                                                                       
                       (let ((rel-x (- (chain e page-x) (chain ($ el) (offset) left)))                                 
                             (rel-y (- (chain e page-y) (chain ($ el) (offset) top)))                                  
                             (max-x (- (chain ($ :body) (width)) (chain ($ el) (width)) 10))                           
                             (max-y (- (chain ($ :body) (height)) (chain ($ el) (height)) 10)))                        
                         (chain ($ document)                                                                           
                                (bind :mousemove                                                                       
                                      (lambda (e)                                                                      
                                        (let ((diff-x (min max-x (max 0 (- (chain e page-x) rel-x))))                  
                                              (diff-y (min max-y (max 0 (- (chain e page-y) rel-y)))))                 
                                          (chain ($ el) (css :left (+ diff-x :px)) (css :top  (+ diff-y :px))))))))))) 
        (chain ($ window)                                                                                              
               (bind :mouseup                                                                                          
                     (lambda (e)                                                                                       
                       (chain ($ document)                                                                             
                              (unbind :mousemove)))))                                                                  
        this))                                                                                                         

- Robert Monfera