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

J'ai besoin d'être capable de déplacer un div avec ma souris et enregistrer la nouvelle pos de la div dans la base de données pour rappeler l'écran. Comment puis-je le faire?

source d'informationauteur Bigballs | 2009-02-18

  1. 16

    Je vous recommande fortement de vous regarder dans jQuery UI et de selection de l'interaction. Fondamentalement, vous aurez envie d'ajouter le code à votre déplaçable div (en supposant qu'il a id="draggable"):

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

    Et, ensuite, mettre votre nécessaire de comportement dans l'événement d'arrêt. Plus spécifiquement, vous devrez faire cela:

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

    Comme pour la base de données de stockage, vous pouvez utiliser un appel AJAX dans la fonction ci-dessus, ou vous pouvez le stocker en page, de telle sorte que certaines formulaire à envoyer ou à d'autres mesures de résultats dans l'information de la position d'être transmises au serveur et stockées en ligne avec d'autres données. Je serais prudent avec un appel AJAX, car vous pourriez bombe votre base de données avec les données de position avec tous les faisant glisser sur tous les navigateurs. Dépend de votre app...

  2. 13

    Voici une petite fonction jQuery que je viens de vous laisser glisser divs en utilisant uniquement jQuery et non pas à l'aide de 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 fonction jQuery empêche même la div de sortir des limites. Fondamentalement, vous joindre à un div que vous destinez à être la faire glisser de l'activateur de dire que la barre de titre par exemple). Invoquant c'est aussi simple que cela:

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

    Donc #barre de titre serait l'id de votre barre de titre de la div et #whatToDrag serait l'id de ce que vous vouliez faire glisser. Je m'excuse pour le désordre code, j'ai juste piraté et pensé qu'il pourrait vous donner une alternative à jQuery UI, tout en le rendant facile à mettre en œuvre.

  3. 2

    Si il y a beaucoup d'objets, puis de mousemove peut coûter cher. Un pas vers la résolution c'est de lier le gestionnaire sur les événements mousedown et délier sur mouseup. Cet exemple n'a pas été conçu et testé avec plusieurs objets; en particulier, le courant de déliaison délie tout ce qui était lié avant (il peut être résolu en nommant l'expression lambda, et se référant à ce nom en séparer).

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