如何使用javascript / jQuery保存隐藏的字段轨道

Question

我的代码中有这个可拖动的画布。

看到它在这里运行：http://jsfiddle.net/MAEvS/190/

input_text:string
input_text_position:string

我想保存文字的位置，所以我尝试了= f.hidden_field :input_text_position

如何使用JQuery保存位置？

Answer 1

诀窍是在“拖动”事件上设置处理程序，在每次事件触发时设置隐藏字段的值：

HTML：

<div id="canvas" class="ui-widget-content">
    <p>Text(drag me)</p>
</div>
<input type="hidden" name="position" id="position" />

使用Javascript：

$('#canvas').draggable().on('drag', function(e) {
    var offset = $('#canvas').offset();
    $('#position').val('(' + offset.left + ',' + offset.top + ')');
});

这会将隐藏字段设置为“（204,93）”之类的点，您可以将其存储在数据库中。