如何用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）」這樣的點，您可以將其存儲在數據庫中。