【发布时间】：2012-01-30 11:44:35
【问题描述】：
可以在一些帮助下做我有一个简单的 ajax 驱动的便签应用程序（带有 jquery UI 和 PHP）正在开发中，我下面的代码存储 X、Y 用于拖动的项目将其发布到数据库并将结果循环回 div。我已经成功地为文本版本构建了代码（类似于发布注释），但我正在尝试做一个可拖动/可缩放的版本来保存图像。但是当我这样做时，我的位置被存储在数据库中，循环出到#projbaord div，但没有被用来正确定位 HTML 元素（我检查了页面源和样式：显示正确的 x，y 但这是不反映在屏幕上）。
我认为问题一定出在PHP的循环和位置x，y的样式中，但似乎无法理解！有什么想法或其他方法可以达到相同的结果？
我认为这可能是一个位置：相对/绝对问题，但这似乎没问题 - 我现在很难过！希望各位高手能帮忙！
用于处理行为并将值存储在数据库中的 Javascript：
function imageStickyDragXYUpdate(){
$(".imagesticky").each(function(index){
var resizethese = $(this).children();
$(this).draggable({
cursor: 'move',
stack: '.imagesticky',
opacity: '0.5',
containment: '#projboard',
scrollspeed: '40',
scrollSensitivity: '10',
stop:function(){
var coord=$(this).position();
var coordLeft = coord.left;
var coordTop = coord.top;
var imageStickyid = $(this).attr('imagestickyid');
//alert('x='+ coordTop + 'y=' + coordLeft + 'id=' +imageStickyid);
var datastring = 'xupdateimg='+ coordTop + '&y=' + coordLeft + '&imgstickyid=' +imageStickyid + '&projid=' + proj_id + '&uid=' + uid;
//alert(datastring);
$.ajax({
type: "POST",
url: "uploaddata.php",
data: datastring,
success: function(data){
$("#projboardresults").html(data);
textStickyDragXYUpdate();//not important other function for working text stickies
imageStickyDragXYUpdate();
}
});
}
});
});
}
PHP 显示结果
<?php
$user_id= $_POST['uid'];
$proj_id=$_POST['projid'];//to be validated as int
$get_imgsticky_query = "SELECT * FROM imagesticky WHERE user_id = $user_id AND project_id=$proj_id";
$get_imgsticky_result=mysql_query($get_imgsticky_query);
while($row=mysql_fetch_assoc($get_imgsticky_result)){
$x = $row['imagesticky_x'];
$y = $row['imagesticky_y'];
$imagesticky_w = $row['imagesticky_w'];
$imagesticky_h = $row['imagesticky_h'];
$imagesticky_url = $row['imagesticky_url'];
$imagesticky_id = $row['imagesticky_id'];
echo '<div class="imagesticky" imagestickyid="'.$imagesticky_id.'" style="position: absolute; left:'.$x.'px; top:'.$y.'px;">
<a class = "clickaddimage" href="addimage.php"><img src="images/clicktoadd.png" alt="add image" title="Click to add image"</a>
<img src="'.$imagesticky_url.'" width="'.$imagesticky_w.'" height="'.$imagesticky_h.'"/>
<a href="" class="deleteimagesticky"><img src="images/closey.png" title="delete" alt="delete"/></a>
</div>';
}
?>
【问题讨论】：
-
似乎它应该可以正常工作。尝试应用位置：相对；到将包含便签的元素。
-
感谢回复，尝试过相对没有变化，非常沮丧！哈哈
-
不幸的是，如果无法直接访问该页面，就无法判断问题出在哪里。休息 30 分钟，喝杯茶，再找问题。
标签： php javascript jquery mysql jquery-ui