jquery 可拖动选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1040902/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery draggable options
提问by amit
i want the draggable object to revert back to its original position when i click a button. i used 'destroy' option but it doesnt seem to work. it disables the dragging but doesnt revert back to original position.
我希望可拖动对象在单击按钮时恢复到其原始位置。我使用了“销毁”选项，但它似乎不起作用。它禁用拖动但不会恢复到原始位置。
can someone help?
有人可以帮忙吗？
EDIT PART:
编辑部分：
$('#Zoom').toggle(function() {
$("#draggable").draggable({});},
function() {
$("#draggable").draggable('destroy');});
this is a toggle button that i am using to enable dragging. the destroy option only disables dragging and does not revert the object back to the original position.
这是我用来启用拖动的切换按钮。destroy 选项仅禁用拖动并且不会将对象恢复到原始位置。
also this is the button i want to make the object come back to its original position:
这也是我想让对象回到其原始位置的按钮：
nextImg.addEventListener('click', function() {img.setAttribute("src", "img"+(++imgnum)+".jpg");}, false);
采纳答案by Ben Koehler
How about this?
这个怎么样？
<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>
I've made some assumptions, such as the nextImg object having an id of "nextImg" so that I can bind the click event using jQuery (one less step in the javascript event binding process?) I'm also assuming that you don't really want to destroy the drag functionality.
我做了一些假设，例如 nextImg 对象的 id 为“nextImg”，这样我就可以使用 jQuery 绑定点击事件（javascript 事件绑定过程中少了一步？）我还假设你不真的想破坏拖动功能。
回答by KClough
Revert executes when dragging has stopped (with optional delay), not on click.
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;
});
});
回答by karim79
EDIT: I'm pretty sure this will do the trick:
编辑：我很确定这可以解决问题：
//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");
}
});
回答by oLinkWebDevelopment
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') });
})
}
// simply call the function in the create event
// 简单地调用创建事件中的函数
var $drag = $('#my_draggable'); //your element
$drag.draggable({
create: revertable($drag)
});
//test it: change the top/left values, refresh, click the button to see it work.
//test it: 改变顶部/左边的值，刷新，点击按钮看看它是否工作。
<div id="my_draggable" style="position:absolute;top:100px;left:100px">
Drag Me Around
</div>
<button class="my_draggable revert">Revert My Draggable</button>
...tested, should work for any element (requires jquery 1.7 for .on() function)
...经过测试，应该适用于任何元素（需要 jquery 1.7 for .on() 函数）
回答by Sinan
Revert option is set to false by default, you've to set it to true.
默认情况下，还原选项设置为 false，您必须将其设置为 true。
$("#draggable").draggable({
revert: true
});
this should do it actually...
这实际上应该这样做......
