JQuery-UI可拖動重置爲原始位置？

我剛剛設置了一個簡單的測試#draggable/#droppable固定寬度/高度+浮動：左。

然後我想要一個重置按鈕來重置#draggable到其原始狀態後，它已被捕捉到#droppable。（底線）

$(document).ready(function() { 

    $("#draggable").draggable 
    ({ 
     revert: 'invalid', 
     snap: '#droppable', 
     snapMode: 'corner', 
     snapTolerance: '22' 

    }); 
}); 

    $("#droppable").droppable 
    ({ 
     accept: '#draggable', 
     drop: function(event, ui) 
     { 
      $(this).find("#draggable").html(); 
     } 
}); 

    $(".reset").click(function() { 
    /* What do I put here to reset the #draggable to it's original position before the snap */ 
});

來源

2013-03-04 user2110966

可拖動的項目不會跟蹤他們原來的位置，我知道;只有在拖動過程中才能恢復。你可以做這你自己，雖然：

$("#draggable").data({ 
    'originalLeft': $("#draggable").css('left'), 
    'origionalTop': $("#draggable").css('top') 
}); 

$(".reset").click(function() { 
    $("#draggable").css({ 
     'left': $("#draggable").data('originalLeft'), 
     'top': $("#draggable").data('origionalTop') 
    }); 
});

http://jsfiddle.net/ExplosionPIlls/wSLJC/

來源

2013-03-04 02:38:08

似乎是我需要的。但是，當我添加\t $（「＃draggable」）。data（{'originalLeft'：$（「＃draggable」）.css（'left'）時， 'origionalTop'：$（「＃draggable」）.css （'top'） }）; 可拖動停止工作 – user2110966 2013-03-04 02:52:52

@ user2110966我認爲您的評論不完整？ – 2013-03-04 02:53:07

我編輯它，抱歉。「可拖動停止工作」。我甚至試圖複製/粘貼整個事情。這很奇怪，因爲它在演示中很明顯。 – user2110966 2013-03-04 02:55:53

我用這一個項目

$("#reset").click(function() { 
    $(".draggable-item").animate({ 
     top: "0px", 
     left: "0px" 
    }); 
});

的伎倆，我

來源

2014-02-16 13:49:40 craig

我使用了這個組合，並從另一個答案獲得原始座標，而不是將其設置回0,0。 – BFWebAdmin 2016-05-04 11:23:03

這絕對是絕佳的位置，看起來真的很棒！ – chrispepper1989 2017-09-13 14:44:28

哇這是光滑的af :) – 2018-02-23 02:44:35

我剛剛取得了巨大成功：

$(".draggable-item").removeAttr("style");

來源

2016-11-15 15:19:34 h0dges

我用h0dges的基本思想。我創造的球回到原來的位置，但我失去了將球變成球的樣式。因此，我保留了球的風格，只是重置他們的頂部和左側樣式，以將它們返回到原來的位置：

function endRound() { 
    $(".ball").css({"top":"", "left":""}); 
}

來源

2016-11-18 12:50:15

JQuery-UI可拖動重置爲原始位置？

回答

相關問題