Question

Im creating myself a drag functions just for my personal use so I can drag elements around. I’m having a problem. At the moment trying to make the drag so one you pick up the element you can drag it but once you drop it, it goes back to the original position. This is not working as you can see here. When I let go of #drag2 or #drag3 then it goes to the position of #drag1.

My Function:

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);
        });
    });
}

I have to get the old position:

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

So should it not get the position of all of them and bring them self back to where they were? Any help will be appreciated.

EDIT: I DO NOT WANT TO USE ANY PLUGIN OR JQUERY UI, THANKS ANYWAYS

Answer 1

The solution is very simple

See this fiddle: http://jsfiddle.net/BggPn/4/

you define 1 var for left and 1 for top. All 3 the elements use the same variables. If you loop through the elements then you make a new scope where each element has it’s own vars.

Working code:

$(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);
            });
        });
    });
}

Make it a plugin:

$.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);
            });
        });
    });
}

Now you can call it by:

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