javascript - how to return a draggable item to its initial position using jquery - Stack Overflow

admin管理员组

文章数量:1376844

I have a set of images placed as position:relative (showing one next to the other).

I use this code to drag and drop them (stolen from the jQuery API documentation, modified to my needs).

$(function() {
        $( ".draggable" ).draggable({
                start: function(event, ui) {
                    // Show start dragged position of image.
                    var Startpos = $(this).offset();
                    $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
                    pos_left = Startpos.left; //pos_left is global
                    pos_top = Startpos.top; //pos_top is also global
                },
                stop: function(event, ui) {
                    // Show dropped position.
                    var Stoppos = $(this).offset();
                    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                    $(this).css('position', "fixed"); //tried absolute and relative, too
                    $(this).css('left', pos_left);
                    $(this).css('top', pos_top); 
                }
        });

        $( ".droppable" ).droppable({
               drop: function( event, ui ) {
                   id = $(this).attr('id');    
               alert(id);
            }
        });
    });

What I am trying to do is to return the draggable element to its initial position, after user drops it. However because my elements are relatively positioned the initial left,top coords are the same for all of them (or this is what I understand from the documentation -- I might be wrong here). So although images return, they actually stack each one on top of the other.

What am I doing wrong? What am I supposed to do?

I have a set of images placed as position:relative (showing one next to the other).

I use this code to drag and drop them (stolen from the jQuery API documentation, modified to my needs).

$(function() {
        $( ".draggable" ).draggable({
                start: function(event, ui) {
                    // Show start dragged position of image.
                    var Startpos = $(this).offset();
                    $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
                    pos_left = Startpos.left; //pos_left is global
                    pos_top = Startpos.top; //pos_top is also global
                },
                stop: function(event, ui) {
                    // Show dropped position.
                    var Stoppos = $(this).offset();
                    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                    $(this).css('position', "fixed"); //tried absolute and relative, too
                    $(this).css('left', pos_left);
                    $(this).css('top', pos_top); 
                }
        });

        $( ".droppable" ).droppable({
               drop: function( event, ui ) {
                   id = $(this).attr('id');    
               alert(id);
            }
        });
    });

What I am trying to do is to return the draggable element to its initial position, after user drops it. However because my elements are relatively positioned the initial left,top coords are the same for all of them (or this is what I understand from the documentation -- I might be wrong here). So although images return, they actually stack each one on top of the other.

What am I doing wrong? What am I supposed to do?

• javascript
• jquery
• css
• draggable
• droppable

Share Improve this question Follow asked Dec 5, 2010 at 20:45 xpantaxpanta 8,4181515 gold badges6262 silver badges110110 bronze badges 1

• Did you try position relative with left and top set to 0px? – bozdoz Commented Dec 5, 2010 at 21:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Well. Instead of doing that by yourself use the revert option of the draggable. From the jQuery UI docks:

$( ".selector" ).draggable({ revert: true });

You could make its position relative, top=0px, and left=0px. Worked for me with this code:

$(function(){
$('#draggable').draggable().append('<a href=# class=exit>x</a>');
});
$(function(){
$('.exit').click(function(){
$('#draggable').css({
'top': '0px',
'left': '0px',
'position': 'relative'
});
});
});

本文标签： javascripthow to return a draggable item to its initial position using jqueryStack Overflow