How to move div with the mouse using jquery?

Question

I need to be able to move a div with my mouse and store the new pos of the div in database to remember the display. How can I do it?

Answer 1

I would highly recommend you look into jQuery UI and the draggable interaction. Basically, you'll want to add the code to your draggable div (assuming it has id="draggable"):

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

And, then put your necessary behavior in the stop event. More specifically, you'd do this:

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

As for the database storing, you could use an AJAX call in the above function, or you could store it in-page, such that some form-send or other action results in the positional information being passed to the server and stored inline with other data. I'd be careful with an AJAX call, since you may bomb your db with position data with every dragging on every browser. Depends on your app...

Answer 2

Here is a little jQuery function I just wrote to let you drag divs using only jQuery and not using 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 //

The jQuery function even prevents the div from going out of the bounds. Basically you attach it to a div that you destine to be the drag activator (say the title bar for instance). Invoking it is as simple as this:

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

So #titleBar would be the id of your titlebar div and #whatToDrag would be the id of what you wanted to drag. I apologize for the messy code, I just hacked it up and thought it would give you an alternative to jQuery UI, while still making it easy to implement.

Answer 3

If there are a lot of objects, then mousemove can get expensive. A step toward solving it is to bind the handler on mousedown and unbind it on mouseup. This example wasn't written and tested with multiple objects though; in particular, the current unbinding unbinds everything that was bound before (it can be solved by naming the lambda expression and referring to that name in 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');
});

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