如何使用jQuery返回可拖動的項目到其初始位置

我有一組圖像放置爲position:relative（顯示一個接一個）。如何使用jQuery返回可拖動的項目到其初始位置

我使用此代碼拖放它們（從jQuery API文檔中被盜，根據需要修改）。

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

我想要做的是將可拖動的元素返回到它的初始位置，在用戶放下它之後。但是因爲我的元素相對定位，所以最初的左邊，上面的座標都是相同的（或者這是我從文檔中理解的 - 我可能在這裏是錯誤的）。因此，儘管圖像會返回，但它們實際上會將每個圖像堆疊在另一個之上。

我在做什麼錯？我應該做些什麼？

來源

2010-12-05 xpanta

您是否嘗試使用左側和頂部設置爲0px的相對位置？ – bozdoz 2010-12-05 21:25:44

好吧。而不是自己使用可拖動的還原選項。從jQuery UI碼頭：

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

來源

2010-12-05 20:58:32

謝謝。這也是一個好點。不過，我需要將元素返回到初始位置，但並非總是如此。我也可以這樣做）？ – xpanta 2010-12-06 07:21:14

你想要什麼時候讓他們退貨？什麼時候不退貨？ – 2010-12-06 08:28:24

您可以使其位置相對，頂部= 0px和左= 0px。使用此代碼爲我工作：

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

來源

2010-12-05 21:23:27 bozdoz

如何使用jQuery返回可拖動的項目到其初始位置

回答

相關問題