0

現在、x 座標と y 座標を別のページに送信する必要があるフォームで使用している jQuery UI を使用しています。

私は現在、「ドラッグ可能なUI」が510x100ピクセルのボックス内に含まれている場所でこれを使用しています。

必要なのは、ドラッグ可能なオブジェクトの最終的な位置の X 座標と Y 座標を取得し、X の座標を 1 つのテキスト入力 (フォーム) に出力し、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 に答える