jQuery UI 保存可拖动元素的位置
jQuery UI save position of draggable element
有没有办法保存可拖动元素的初始位置,确定拖动结束时的位置,然后 return 元素到初始位置?
您可以使用 stop
事件和 ui
参数的 originalPosition
值来获取原始位置。
获得原始位置后 - 您可以使用 $(this).animate
和 originalPosition
的值将元素移动到该位置
这是一个例子:
$( ".drag" ).draggable({
stop: function( event, ui ) {
console.log(ui.originalPosition)
$(this).animate(ui.originalPosition)
}
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<div style="width: 50px; height: 50px; border: 1px solid red;" class="drag"> Drag Me! </div>
<div style="width: 50px; height: 50px; border: 1px solid green;" class="drag"> Drag Me! </div>
有没有办法保存可拖动元素的初始位置,确定拖动结束时的位置,然后 return 元素到初始位置?
您可以使用 stop
事件和 ui
参数的 originalPosition
值来获取原始位置。
获得原始位置后 - 您可以使用 $(this).animate
和 originalPosition
这是一个例子:
$( ".drag" ).draggable({
stop: function( event, ui ) {
console.log(ui.originalPosition)
$(this).animate(ui.originalPosition)
}
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<div style="width: 50px; height: 50px; border: 1px solid red;" class="drag"> Drag Me! </div>
<div style="width: 50px; height: 50px; border: 1px solid green;" class="drag"> Drag Me! </div>