javascript - mousein - mousemove jquery

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 investigue la interfaz de usuario de jQuery y la interacción que se puede arrastrar. Básicamente, querrás agregar el código a tu div arrastrable (asumiendo que tiene id = "arrastrable"):

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

Y luego, ponga su comportamiento necesario en el evento de detención. Más específicamente, harías esto:

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

En cuanto al almacenamiento de la base de datos, puede usar una llamada AJAX en la función anterior, o puede almacenarla en la página, de modo que algún envío de formulario u otra acción da como resultado que la información posicional se transfiera al servidor y se almacene en línea con otra 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 tu 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 div 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). Invocarlo es tan simple como esto:

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

Entonces #titleBar sería la identificación de tu div de la barra de título y #whatToDrag sería la identificación de lo que querías 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))