php - 使用循环从多个 PHP 回显属性设置 CSS x 和 y

Question

专家的一个快速问题，

我正在制作一个协作网站，让用户可以添加带有文本的便签并在屏幕上移动它们。我有一个数据库文件存储文本和坐标 (PHP/MySql) 通过 ajax 和 jquery/jquery UI 完成。我在从数据库中获取数据并返回到页面时遇到了一些问题。

数据被循环到一个 div 类中(以 x 和 y 作为属性)，我正在使用一个循环来取回 x 和 y 并尝试将它们应用到 CSS。我已经发出警报并且正在获取数据，但我似乎在应用它时遇到了问题。我知道这个元素会很顺利....谢谢你的时间。

这是我正在尝试的代码:

基本的 PHP 循环:

<?php

$get_textsticky_query = "SELECT * FROM textsticky 
                        WHERE user_id = $current_id 
                       AND project_id=$user_project_id";

$get_textsticky_result=mysql_query($get_textsticky_query);
while($row=mysql_fetch_assoc($get_textsticky_result)){

echo '<div class="textsticky" x="'.$row['textsticky_x'].'" y="'.$row['textsticky_y'].'"><div class="textstickyvalueholder" contentEditable="true" textstickyid="'. $row['textsticky_id'] .'">'. $row['textsticky_text'] .'</div><button>Like</button></div>';
}

?>

尝试使用 jquery 应用于 CSS:

 $(".textsticky").each(function(index){

 //store x, y from looped php
 var x = $(this).attr("x");
 var y = $(this).attr("y");

 //assign looped php to css
 $(this).css("left",x);
 $(this).css("top",y);

  });

Answer 1

要在父容器内移动对象，您需要在 .textsticky 的 css 中设置 postoon: relative;。

要在整个屏幕上移动对象，您需要设置position: absolute;。

如果不更改 position 属性，left 和 top 值将不执行任何操作。