Drag and Drop -JQuery

Question

Я создаю функции перетаскивания только для личного использования, чтобы я мог перетаскивать элементы вокругУ меня проблема.В данный момент, пытаясь сделать перетаскивание таким образом, чтобы вы взяли элемент, вы можете перетащить его, но как только вы уроните его, он вернется в исходное положение.Это не работает, как вы можете видеть здесь .Когда я отпускаю #drag2 или #drag3, он переходит в положение #drag1.

Моя функция:

function drag(el) {
    var position = $(el).position();
    var ptop = position.top;
    var pleft = position.left;
    var down = false;
    $(el).mousedown(function(event) {
        down = true;
        $(this).css({
            cursor: 'crosshair',
        });
        $(this).mousemove(function(event) {
            if (down == true) {
                $(this).css({
                    cursor: 'crosshair',
                });
                var w = $(this).width();
                var h = $(this).height();
                var left3 = (w / 2) + 7;
                var top3 = (h / 2) + 7;
                $(this).css({
                    cursor: 'crosshair',
                    left: (event.clientX) + (3 * 3) - left3,
                    top: (event.clientY) + (3 * 3) - top3
                });
            }
        }).mouseup(function() {
            down = false;
            $(this).css({
                cursor: 'default',
            });
            $(this).animate({
                top: ptop,
                left: pleft
            }, 300);
        });
    });
}

Я должен получить старую позицию:

        var position = $(el).position();
        var ptop = position.top;
        var pleft = position.left;

Так не должно ли оно занять положение всех их и вернуть их себе туда, где они были?Любая помощь будет оценена.

РЕДАКТИРОВАТЬ: Я ДЕЛАЮ НЕ ХОЧУ ИСПОЛЬЗОВАТЬ ЛЮБОЙ ПЛАГИН ИЛИ JQUERY UI, СПАСИБО ВСЕГДА

Answer 1

Решение очень простое

См. Эту скрипку: http://jsfiddle.net/BggPn/4/

вы определяете 1 переменную для левого и 1 для верхнего.Все 3 элемента используют одинаковые переменные.Если вы перебираете элементы по элементам, вы создаете новую область видимости, где каждый элемент имеет свои собственные переменные.

Рабочий код:

$(document).ready(function() {
    drag('#drag, #drag2, #drag3')
});

function drag(el) {
    $(el).each(function(){
        var position = $(this).position();
        var ptop = position.top;
        var pleft = position.left;
        var down = false;
        $(this).mousedown(function(event) {
            down = true;
            $(this).css({
                cursor: 'crosshair',
            });
            $(this).mousemove(function(event) {
                if (down == true) {
                    $(this).css({
                        cursor: 'crosshair',
                    });
                    var w = $(this).width();
                    var h = $(this).height();
                    var left3 = (w / 2) + 7;
                    var top3 = (h / 2) + 7;
                    $(this).css({
                        cursor: 'crosshair',
                        left: (event.clientX) + (3 * 3) - left3,
                        top: (event.clientY) + (3 * 3) - top3
                    });
                }
            }).mouseup(function() {
                down = false;
                $(this).css({
                    cursor: 'default',
                });
                $(this).animate({
                    top: ptop,
                    left: pleft
                }, 300);
            });
        });
    });
}

Сделайте его плагином:

$.fn.drag = function drag(){
    return this.each(function(){
        var position = $(this).position();
        var ptop = position.top;
        var pleft = position.left;
        var down = false;
        $(this).mousedown(function(event) {
            down = true;
            $(this).css({
                cursor: 'crosshair',
            });
            $(this).mousemove(function(event) {
                if (down == true) {
                    $(this).css({
                        cursor: 'crosshair',
                    });
                    var w = $(this).width();
                    var h = $(this).height();
                    var left3 = (w / 2) + 7;
                    var top3 = (h / 2) + 7;
                    $(this).css({
                        cursor: 'crosshair',
                        left: (event.clientX) + (3 * 3) - left3,
                        top: (event.clientY) + (3 * 3) - top3
                    });
                }
            }).mouseup(function() {
                down = false;
                $(this).css({
                    cursor: 'default',
                });
                $(this).animate({
                    top: ptop,
                    left: pleft
                }, 300);
            });
        });
    });
}

Теперь вы можете позвонить по этому номеру:

$("#drag1, #drag2").drag();

Answer 2

Проблема в том, что когда вы отправляете в список селекторов '#drag, #drag2. #drag3', а ваша переменная положения заботится только о первом (попробуйте изменить порядок, и вы увидите, что они привязываются к первому в списке).Если вы хотите пойти по этому пути, то вам нужно выполнить итерацию each над ними, чтобы получить правильные значения.

Answer 3

2 мысли: 1.) Почему вы не используете jQuery UI (перетаскиваемый)?

2.) Идея дать селектор вместо элемента неверна, селектор может привести к нескольким элементам, и это первая причина, почему он терпит неудачу. Если вы начнете с

function drag(selector) {
   $(selector).each(function() {
      var el = $(this);
      //rest of code
   }
}

было бы лучше. Но я думаю, что в конечном итоге вы столкнетесь с некоторыми другими проблемами

Answer 4

получить текущую позицию div после перетаскивания и установить с помощью этого

.mouseup(function() {
            var position = $(this).position();
            down = false;
            $(this).css({
                cursor: 'default',
            });
            $(this).animate({
                top: position.top,
                left: position.left
            }, 300);

DEMO

---

почему бы вам не использовать плагин перетаскивания. см. эту статью

http://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html

или этот

http://plugins.jquery.com/project/dragndrop