如何使用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))