JQuery-UI可拖动重置到原始位置

Posted 2023-05-08

【中文标题】JQuery-UI可拖动重置到原始位置

【英文标题】：JQuery-UI draggable reset to original position

【发布时间】：2013-02-18 01:46:12

【问题描述】：

这可能很容易做到，但我总觉得太复杂了。

我刚刚使用 #draggable / #droppable 设置了一个简单的测试，具有固定的宽度/高度 + float:left。

然后我希望重置按钮能够在 #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 */
);

【参考方案1】：

我在一个项目中使用了这个

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

帮我搞定了

【讨论】：

我结合使用这个并从另一个答案中获取原始坐标，而不是将其设置回 0,0。

这对于没有一个绝对位置看起来真的很好！

【参考方案2】：

我所知道的可拖动项目不会跟踪它们的原始位置；仅在拖动过程中并被弹回。不过，您可以自己执行此操作：

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

【讨论】：

似乎是我需要的。但是，当我添加 $("#draggable").data('originalLeft': $("#draggable").css('left'), 'originalTop': $("#draggable").css('最佳'） ）;可拖动停止工作

@user2110966 我认为您的评论不完整？

我编辑了它，对此感到抱歉。 “可拖动停止工作”。我什至试图复制/粘贴整个内容。这很奇怪，因为它显然适用于演示。

@user2110966 很难说没有看到你的代码/网站的其余部分

jsfiddle.net/6TNeZ/3 基本上就是这样。尝试查找错误，但找不到任何错误。

【参考方案3】：

我刚刚在以下方面取得了巨大成功：

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

【讨论】：

这个答案确实对我有所帮助，但它也删除了“位置：相对”，导致下一个拖动动作无法以原始方式设置动画。

【参考方案4】：

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

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

【参考方案5】：

我发现以下是重置到原始位置的最简单方法，但如果您希望项目保持拖动，这将无法单独工作

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

这对我来说可以重置到原始位置并保持项目可拖动：

$("#reset").click(function () 
    // Reset position
    $(".draggable-item").removeAttr('style');

    // Destroy original draggable and create new one
    $(".draggable-item").draggable("destroy");
    $(".draggable-item").draggable();
);

【参考方案6】：

我不确切知道人们希望看到什么，但我对通过单击垂直或水平将对象重置到初始位置做了一些调整。Fiddle https://jsfiddle.net/JunaidAli/wp1n796q/321/