如何獲得x和y的jQuery可拖動

的值，我創建了下面的代碼：如何獲得x和y的jQuery可拖動

<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"; 
?>

它可以正常使用。但現在不知道如何將其插入可拖動。

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

在「標題」中輸入的文本應該可以拖動並得到x和y值插入變量$ x中的位置和$ Y

我需要的例子如何獲取座標開始

感謝幫助

來源

2015-12-28 Gislef

試試這個代碼

$(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); 
}); 
});

我希望你能回答

來源

2015-12-28 22:37:52

如何獲得x和y的jQuery可拖動

回答

相關問題