Javascript 拖放-JQuery

我自己创建了一个拖动功能，只是为了我个人使用，所以我可以拖动周围的元素。我有个问题。在尝试进行拖动时，如果你拾取了元素，你可以拖动它，但一旦你放下它，它就会回到原始位置。正如您所看到的，这不起作用。当我放开

#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用户界面，无论如何谢谢

在拖动并通过此设置后获取div的当前位置

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

---

为什么不使用拖放插件呢。参见本文

还是这个

2个想法： 1.）为什么不使用jQuery UI（可拖动）

2.）用选择器代替元素的想法是错误的，选择器可能导致多个元素，这是它失败的第一个原因。如果你从

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

---

那会更好。但是我想你最终会遇到一些其他的问题。解决方法很简单

看这把小提琴：

您为左侧定义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();

---

问题是，每当你在选择器列表中发送

“#拖动，#拖动2时#drag3'

并且您的位置变量只关心第一个（尝试更改顺序，您将看到它们捕捉到列表中的第一个）。如果您想这样做，那么您需要对它们执行

每次
迭代，以获得正确的值。
使用jQuery，您也可以使用它，我喜欢制作自己的东西。我知道这会更容易，但这是答案吗？你说他应该做一些可能对他更好的事情，但你没有回答他的问题好吧，我喜欢自己做东西。我知道这样会容易些。我只是在开发新事物的过程中遇到了一些困难。不过谢谢。拖放插件不是插件，它是jQuery的一个扩展，就像jQuery模板一样，但在本例中，jQuery UI jQuery图像查看器将是一个插件