Cómo mover div con el mouse usando jquery?

Question

Necesito poder mover un div con mi mouse y almacenar la nueva posición del div en la base de datos para recordar la pantalla. ¿Cómo puedo hacerlo?

Answer 1

Recomiendo encarecidamente que consulte jQuery UI y la interacción que se puede arrastrar. Básicamente, tendrá que añadir el código a su div arrastrable (suponiendo que tiene id = "arrastrable"):

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

Y, a continuación, poner su comportamiento necesario en caso de parada. Más específicamente, haría esto:

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

En cuanto al almacenamiento de base de datos, se puede utilizar una llamada AJAX en la función anterior, o se puede almacenar en páginas, de tal manera que de alguna forma u otra a enviar acción da como resultado que la información posicional se pase al servidor y se almacene en línea con otros datos. Tendría cuidado con una llamada AJAX, ya que puede bombardear su base de datos de posición con cada arrastre en cada navegador. Depende de su aplicación ...

Answer 2

Aquí hay una pequeña función jQuery que acabo de escribir para permitirle arrastrar divs usando solo jQuery y no usando 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 // 

La función jQuery incluso evita que el div se salga de los límites. Básicamente lo adjuntamos a un div que usted destina a ser el activador de arrastre (por ejemplo, la barra de título). La invocación es tan simple como esto:

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

Así #titleBar sería el ID de su div barra de título y #whatToDrag sería la identificación de lo que quería arrastrar. Me disculpo por el código desordenado, simplemente lo pirateé y pensé que le daría una alternativa a la interfaz de usuario de jQuery, al mismo tiempo que lo haría fácil de implementar.

Answer 3

Si hay muchos objetos, mousemove puede ser costoso. Un paso para resolverlo es vincular el controlador en el mousedown y desvincularlo en el mouseup. Sin embargo, este ejemplo no fue escrito y probado con múltiples objetos; en particular, la desvinculación actual desvincula todo lo que estaba vinculado antes (se puede resolver nombrando la expresión lambda y refiriéndose a ese nombre al desvincular).

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'); 
}); 

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