Как переместить div с помощью мыши с помощью jquery?

Ответ 1

Я очень рекомендую вам изучить jQuery UI и перетаскиваемое взаимодействие. В принципе, вы захотите добавить код в свой divgable div (при условии, что он имеет id = "draggable" ):

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

И затем введите свое необходимое поведение в событие остановки. В частности, вы сделаете следующее:

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

Что касается хранения базы данных, вы можете использовать вызов AJAX в вышеуказанной функции, или вы можете сохранить его на странице, так что какое-либо сообщение формы или другое действие приводит к тому, что информация о местоположении передается на сервер и сохраняется встроенный с другими данными. Я был бы осторожен с вызовом AJAX, так как вы можете бомбить свой db данными о местоположении при каждом перетаскивании в каждом браузере. Зависит от вашего приложения...

Ответ 2

Вот небольшая функция jQuery, которую я только что написал, чтобы вы могли перетаскивать div, используя только jQuery и не используя 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 //

Функция jQuery даже предотвращает выход div из границ. В основном вы прикрепляете его к div, который вам суждено быть активатором перетаскивания (например, строка заголовка). Вызов его так же просто:

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

Итак, #titleBar будет идентификатором вашего заголовка div, а #whatToDrag будет идентификатором того, что вы хотели перетащить. Я извиняюсь за грязный код, я просто взломал его и подумал, что это даст вам альтернативу пользовательскому интерфейсу jQuery, но все же упростит его реализацию.

Ответ 3

Если есть много объектов, то mousemove может стать дорогим. Шаг к его решению - привязать обработчик к mousedown и отвязать его на мыши. Однако этот пример не был написан и протестирован с несколькими объектами; в частности, текущее открепление отвязывает все, что было связано раньше (его можно решить, называя лямбда-выражение и ссылаясь на это имя в 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');
});

Или в 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))