如何获取x和y jquery Draggable的值答案

【问题标题】：How to get the values of x and y jquery Draggable如何获取x和y jquery Draggable的值
【发布时间】：2015-12-28 19:53:33
【问题描述】：

我创建了以下代码：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#ajax_form').submit(function(){
var dados = jQuery( this ).serialize();


jQuery.ajax({
type: "POST",
url: "processa.php",
data: dados,
success: function( data )
{
$('#imagem').attr("src",data);
}
});


return false;
});
});
</script>
</head>
<body> 


// FORM 


<form method="post" action="" id="ajax_form"> 
   Title <input type = "text" name="titulo" value="">
    X <input type = "text" name="x" value="">
    Y <input type = "text" name="y" value=""> 
      <input type="submit" name="enviar" value="Enviar" />
</form>


// Here I am trying to print the updated image
<img id="imagem" src="<?php $texto?>.jpg">
</body>


</html>

在文件 processa.php 中

<?php


if ($_SERVER['REQUEST_METHOD'] == 'POST') {

 $titulo = $_POST['titulo'];
 $x = $_POST['x'];
 $y = $_POST['y'];


}


// Generate image using the GD library
$texto = $titulo; // content from post form
$font_size = 10; 
$font_file = 'arial.ttf'; 
$texto = wordwrap($texto, 11, "\n", true);
 $x = $x; // has the form
 $y = $y; // has the form
 $imagem = imagecreate(50, 50); 
$fundo= imagecolorallocate($imagem , 0, 0, 0); 
$letra= imagecolorallocate($imagem , 255, 255, 255); 


imagettftext($imagem, $font_size, 0, $x, $y, $letra, $font_file, $texto);
 imagejpeg($imagem, $texto.".jpg", 100); // saved image directory 
imagedestroy($imagem); 
echo $texto.".jpg";
?>

它运行良好。但是现在不知道怎么把这个insert变成draggable。

http://jqueryui.com/draggable/#events

在“标题”中输入的文字应该可以拖拽得到x和y值，用于插入变量$x和$y的位置

我需要一个如何获取坐标开始的示例

感谢帮助

【问题讨论】：

标签： php jquery jquery-ui gd draggable

【解决方案1】：

试试这个代码

$(function(){$("#demo-box").click(function(e){
  var offset = $(this).offset();
  var relativeX =(e.pageX - offset.left);
  var relativeY =(e.pageY - offset.top);
  alert("X: "+ relativeX +"  Y: "+ relativeY);
 });
});

希望你能得到答案

【讨论】：