Как переместить div с помощью мыши, используя jquery?

Question

Мне нужно иметь возможность перемещать div с помощью мыши и сохранять новую позицию div в базе данных, чтобы запомнить отображение. Как мне это сделать?

Answer 1

Я очень рекомендую вам взглянуть на jQuery UI и перетаскиваемое взаимодействие. По сути, вам нужно добавить код в перетаскиваемый элемент div (при условии, что он имеет id = "draggable"):

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

А затем поместите необходимое поведение в событие остановки. Точнее, вы бы сделали это:

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

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

Answer 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, но при этом сделает его простым в реализации.

Answer 3

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

Или в паранскрипте:

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