jQuery-ui:显示可拖动小部件的X和Y

Question

我当前使用的是我使用的jQuery ui，该ui以我需要将x和y坐标发送到其他页面的形式。

我目前正在使用此此事，其中"可拖动UI"包含在510x100 PX框中。

我需要的是将拖放的最终位置的x坐标和y坐标获取，然后在另一个文本输入（form）和y中打印x的坐标。

关于如何这样做的想法？

<style>
.draggable { width: 1px; height: 1px; padding: 0.5em; float: left; margin: 0 1px 1px 0; }
#containment-wrapper { width: 510px; height:110px; border:2px solid #ccc; padding: 10px; }
h3 { clear: left; }
</style>
<script>
$(function() {
    $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
});
</script> <div id="containment-wrapper">

 <div id="draggable3" class="draggable ui-widget-content">
        <p>Motto</p>
 <div id="containment-wrapper">
    <div id="draggable3" class="draggable ui-widget-content">
        <p>Motto</p>
---
Would like to display in a box like this
 <input size="10" type="text" id="mottox" name="mottox" readonly/>
 <input size="10" type="text" id="mottoy" name="mottoy" readonly/>

Answer 1

您可以使用JQueryui draggable的停止事件。

add：

        stop: function(e , ui) {
            $("#mottox").val($(this).position().left);
            $("#mottoy").val($(this).position().top);
        }

作为拖放的标志（）（就像您对围栏和滚动一样）。一旦拖动停止，这将填充输入的值的"左"one_answers"顶部"值。

在JSFiddle上查看此操作示例：http://jsfiddle.net/9mjjg/1/

而不是停止事件，您还可以使用拖动，这将提供更多的实时更新。