如何使用jquery移动鼠标的div？

Question

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

Answer 1

我强烈建议你看看jQuery UI和可拖动的交互。基本上，你要的代码添加到您可拖动DIV（假定它有ID =“拖动”）：

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

而且，然后把你的必要行为，停止事件。更具体地讲，你可以这样做：

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

至于数据库中存储，你可以在上面的函数中使用AJAX调用，或者你可以将其存储在页，这样一些形式，发送或其他动作导致位置信息被传递到服务器并与其他数据一起存储。我会小心一个AJAX调用，因为你可能会在每个浏览器上拖动位置数据来轰炸你的数据库。取决于你的应用程序...

Answer 2

这里有一个小的jQuery函数，我只是写了让你拖动div只使用jQuery而不使用jQuery UI。

/* 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（比如标题栏）。调用它是如此简单：

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

所以#titleBar将是你的标题栏div的ID和#whatToDrag将是你想拖到什么ID。我对这些混乱的代码表示歉意，我只是把它篡改了，并认为它会给你一个jQuery UI的替代品，同时还使它易于实现。

Answer 3

如果有很多对象，那么mousemove会变得昂贵。解决它的一个步骤是绑定mousedown上的处理程序，并在mouseup上解除绑定。这个例子并没有用多个对象编写和测试;特别是当前的解除绑定解除了之前绑定的所有内容（可以通过命名lambda表达式并在解除绑定中引用该名称来解决）。

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))