0

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

我目前正在使用它，其中“可拖动 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/>
4

1 回答 1

1

您可以利用 jQueryUI Draggable 的停止事件。

添加：

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

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

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

除了停止事件，您还可以使用拖动来提供更实时的更新。

于 2012-11-06T04:47:46.107 回答