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

答

可拖动的项目不会跟踪他们原来的位置，我知道;只有在拖动过程中才能恢复。你可以做这你自己，虽然：

$("#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/

似乎是我需要的。但是，当我添加\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" 
    }); 
});

的伎俩，我

我使用了这个组合，并从另一个答案获得原始坐标，而不是将其设置回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");

答

我用h0dges的基本思想。我创造的球回到原来的位置，但我失去了将球变成球的样式。因此，我保留了球的风格，只是重置他们的顶部和左侧样式，以将它们返回到原来的位置：

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

JQuery-UI可拖动重置为原始位置？

相关推荐