Jqueryのドラッグ可能な位置を格納する

Question

JQueryUIのドラッグ可能なオブジェクトのX、Y座標をドロップすると、それらをAJAXを使用して何か（Javaサーブレット）にPOSTするにはどうすればよいですか？

私はデータベースにその場所を格納しようとしていますが、イブはそれを行うハンドラを持っています。私は大丈夫バックエンドの人ですが、私はJavaScriptを吸っています！

Answer 1

これを停止した後、あなたがオブジェクトの上部と左の位置を取得することができますだけでAJAXがあるかもしれないあなたを呼び出すことを含んでいます使用することができます。

$(".draggable").draggable({ 
    stop: function(event, ui) { 
     var x = ui.position.left; 
     var y = ui.position.top; 

     $.post("servlet", { 
      x: x, 
      y: y 
     }.success(function() { 
      console.log(event+" "+ui+" "+ui.position); 
     }.error(function() { 
      console.log("FAILED: "+event+" "+ui+" "+ui.position); 
     }); 
    } 
}); 

Answer 2

イベントのjQuery ui draggableメソッドのドキュメントを見ると、stopメソッドが表示されます。このメソッドでは、ドラッグ可能な要素axisオプションを見てから、データベースを更新するためにajaxを呼び出します。

$(".selector").draggable({ 
    stop: function(event, ui) { 
     //edit for my mistake 
     //var axis = $(".selector").draggable("option", "axis"); 
     var axis = ui.position; 
    } 
}); 

Answer 3

これは役立ちますか？あなたはui.positionから

$(document).ready(function(){ 

$("#drag_area").draggable({ 
    stop: function(event, ui){ 
     console.log(event); 
     console.log(ui); 
     console.log(ui.position); 
     var left = ui.position.left; 
     var top = ui.position.top; 
    } 
}); 
}); 

コールバック関数の引数から必要なデータを取得することができますドラッグを