Comment déplacer div avec la souris en utilisant jquery?

Question

Je dois être capable de déplacer un div avec ma souris et de stocker le nouveau pos de la div dans la base de données pour me souvenir de l'affichage. Comment puis-je le faire?

Answer 1

Je vous recommande fortement de regarder dans jQuery UI et l'interaction draggable. En gros, vous voulez ajouter le code à votre draggable div (en supposant qu'il a id = « draggable »):

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

Et puis mettre votre comportement nécessaire en cas d'arrêt. Plus précisément, vous feriez ceci:

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

En ce qui concerne le stockage de base de données, vous pouvez utiliser un appel AJAX dans la fonction ci-dessus, ou vous pouvez le stocker en page, par exemple qu'une certaine forme-envoyer ou autre L'action aboutit à ce que les informations de position soient transmises au serveur et stockées en ligne avec d'autres données. Je serais prudent avec un appel AJAX, car vous pouvez bombarder votre db avec des données de position à chaque glisser sur chaque navigateur. Dépend de votre application ...

Answer 2

Voici une petite fonction jQuery que je viens d'écrire pour vous permettre de faire glisser des divs en utilisant uniquement jQuery sans utiliser l'interface utilisateur jQuery.

/* 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 fonction jQuery empêche même le div de sortir des limites. Fondamentalement, vous l'attachez à un div que vous destinez à être l'activateur de drag (disons la barre de titre par exemple). Il est aussi l'invocation simple que cela:

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

DonC#titleBar serait l'id de votre barre de titre div et #whatToDrag serait l'id de ce que vous vouliez faire glisser. Je m'excuse pour le code désordonné, je l'ai juste piraté et je pensais qu'il vous donnerait une alternative à l'interface utilisateur de jQuery, tout en le rendant facile à mettre en œuvre.

Answer 3

S'il y a beaucoup d'objets, alors le mousemove peut devenir cher. Une étape vers la résolution est de lier le gestionnaire sur mousedown et de le désengager sur mouseup. Cet exemple n'a pas été écrit et testé avec plusieurs objets cependant; en particulier, la déliaison courante délie tout ce qui était lié auparavant (il peut être résolu en nommant l'expression lambda et en se référant à ce nom dans 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'); 
}); 

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