Question

我目前正在使用jQuery UI，我正在使用的形式，我需要将x和y坐标发送到不同的页面。

我目前正在使用this，其中'draggable ui'包含在510x100像素盒内。

我需要的是获取可拖动的最终位置的X坐标和Y坐标，并在一个文本输入（窗体）中打印X的坐标，在另一个文本输入中打印Y的坐标。

有关如何操作的任何想法？

<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的stop事件。

添加：

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

作为draggable（）的标志（正如您对包含和滚动所做的那样）。一旦拖动停止，这将使用可拖动项目的“左”和“顶”值填充输入值。

在jsfiddle上查看这个工作示例： http://jsfiddle.net/9mjJG/1/

您可以使用drag代替停止事件，这样可以提供更多实时更新。

jQuery-UI：显示可拖动小部件的X和Y.

1 个答案: