jQuery可拖动选项

Question

我希望可以通过点击按钮使可拖动对象恢复到原始位置。我尝试使用“destroy”选项，但似乎没有效果。它禁用了拖动，但不能将对象恢复到原始位置。

有人能帮忙吗？

EDIT部分：

$('#Zoom').toggle(function() {
                $("#draggable").draggable({});},
            function() {
                $("#draggable").draggable('destroy');});

我正在使用一个切换按钮来启用拖拽功能。Destroy选项仅禁用拖拽，但不会将对象恢复到原始位置。

此外，这是我想要用来使对象返回其原始位置的按钮：

nextImg.addEventListener('click', function() {img.setAttribute("src", "img"+(++imgnum)+".jpg");}, false);

- amit

---

这是在你拖动到新位置之后吗？还是在你放置到某个地方之后？还是在拖动过程中？ - jwl

当我将对象拖动到新位置后，当我点击按钮时，它应该恢复到原始位置。 - amit

@amit - 你应该在这上面设置赏金，你有100个声望，应该够了。 - karim79

@karim：我该怎么做呢？我没有看到任何赏金选项？ - amit

从常见问题解答中：如果两天后你仍然没有得到满意的答案，你可以提供悬赏。 - Ben Koehler

Answer 1

这个怎么样？

<script type="text/javascript">
jQuery(document).ready(function() { 
    $("#draggable").data("Left", $("#draggable").position().left)
                    .data("Top", $("#draggable").position().top);
    $("#draggable").draggable();

    $("#nextImg").bind('click', function() {
        $("#draggable").animate(
            { "left": $("#draggable").data("Left"), 
                "top": $("#draggable").data("Top")
            }, "slow");
        $("#draggable").attr("src", "img"+(++imgnum)+".jpg");
    });
});
</script>

我做了一些假设，比如nextImg对象具有"id=nextImg"，这样我就可以使用jQuery绑定点击事件（javascript事件绑定过程中少了一步？）。我还假设您实际上不想破坏拖动功能。

- Ben Koehler

---

我确实想要取消可拖动属性。没问题，我现在要测试一下。让我们看看它的效果如何。非常感谢你的努力！大大的赞！ - amit

太好了。脚本的一部分正在工作。图像已重置回原始位置。但它没有切换到下一个图像。让我看看。非常感谢。 - amit

我喜欢使用数据，但我没有充分利用这个功能。做得好。 - KClough

Answer 2

当拖动停止时（可选延迟），Revert会执行，而不是在单击时执行。

$(document).ready(function() {
   var originalTop = $('#draggable').position().top;
   var originalLeft = $('#draggable').position().left;

   $('#Zoom').toggle(
         function() {
            $("#draggable").draggable({});},
         function() {
            $("#draggable").draggable('destroy');
            $('#draggable').position().top = originalTop;
            $('#draggable').position().left= originalLeft;
         });
});

- KClough

---

这可以通过仅缓存原始位置对象来使其更简洁，但我认为这更详细地说明了重点。 - KClough

我认为这可能有效。我遇到的一个问题是thingtodrag和#thingtoclick具有不同的事件监听器函数。 #thinktoclick无法识别originalTop和originalLeft变量。请原谅我，我还比较新手。 - amit

请查看我在原帖中的编辑。 - amit

编辑后反映了您的代码，我相信这就是您要寻找的。 - KClough

jQuery的position()方法只是一个getter，而不是setter；因此，代码的最后两行实际上不会改变#draggable的位置。 - Aaron

Answer 3

编辑：我非常确定这将起作用：

//reposition the draggable after it has finished
$(".selector").draggable({  
    stop: function(e,ui) { 
        ui.instance.element.css("left","0px"); 
        ui.instance.element.css("top","0px"); 
    } 
});

- karim79

---

立即还原不会立即将拖动的对象还原到其原始位置吗？我希望在单击按钮时发生这种情况。 - amit

是的，我尝试过这样做。它可以禁用拖动，但不能将对象带回原始位置。我的目标是：在图像幻灯片中，当用户完成拖动图像后，当用户单击下一个图像按钮时，下一个图像应显示在原始位置。 - amit

@amit - 请再次查看我的编辑。如果它有效，请随意给我买一杯啤酒。 - karim79

我现在要进行测试。但是它不会将对象重置为文档的0,0吗？我希望它将对象重置为容器的0,0。我欠你的不仅仅是一杯啤酒。自昨天以来，你一直是我的救星。 - amit

@amit - 糟糕，我已经没有任何想法和灵感了。 - karim79

Answer 4

function revertable($drag){     
    $drag.data({ top: $drag.css('top'), left: $drag.css('left') })  
    $('.'+$drag.attr('id')+'.revert').data({ revert: '#'+$drag.attr('id') })
        .on('click',function(){
            var $rev = $( $(this).data('revert') );
            $rev.css({ top: $rev.data('top'), left: $rev.data('left') });
    })
}

// 在创建事件中简单调用该函数

var $drag = $('#my_draggable'); //your element
$drag.draggable({
    create: revertable($drag)
});

//测试一下：更改上/左值，刷新，点击按钮以查看其效果。

<div id="my_draggable" style="position:absolute;top:100px;left:100px">
    Drag Me Around
</div>

<button class="my_draggable revert">Revert My Draggable</button>

...已经测试，应该适用于任何元素（需要jQuery 1.7的.on()函数）

- oLinkWebDevelopment

Answer 5

默认情况下，还原选项设置为false，您需要将其设置为true。

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

实际上这应该可以做到...

- Sinan

---

我知道。我明确记得将其设置为true。 - amit

Answer 6

回滚有帮助吗？

http://docs.jquery.com/UI/Draggable#option-revert

- Fiona - myaccessible.website

---

Revert 在拖动停止时将元素返回到其原始位置，而不是在用户单击按钮时。 - Matthew Jones