Настройка CSS x и y из нескольких атрибутов PHP с повторением

Question

Быстрый вопрос для экспертов,

Я создаю сайт для совместной работы, позволяющий пользователям добавлять стикеры с текстом и перемещать их по экрану. У меня есть файл базы данных, в котором хранятся текст и координаты (PHP / MySql) через пользовательский интерфейс ajax и jquery / jquery. У меня возникли проблемы с извлечением данных из базы данных и возвратом к странице.

Данные зациклены на класс 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>';
}

?>

Попытка применить к CSS с помощью jquery:

 $(".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

get_textsticky_result=mysql_query($get_textsticky_query);
while($row=mysql_fetch_assoc($get_textsticky_result)){
      $x = $row['textsticky_x'];
      $y = $row['textsticky_y'];
      echo '<div class="textsticky" style="left:'.$x.'px; top:'.$y.'px;" textstickyid="'.     
      $row['textsticky_id'] .'"><div class="textstickyvalueholder" contentEditable="true">'.  
      $row['textsticky_text'] .'</div><button>Like</button></div>';
 }

Я могу использовать зацикленный PHP с x и y, установленными в div и возвращенными в div результатов с ajax, вместо установки x и y с помощью javascript, более простого решения в ретроспективе.

Answer 2

вот ваше решение jquery! =) * * Тысяча одна

проверь мою скрипку: http://jsfiddle.net/4mgVC/

HTML:

<div class="textsticky" data-x=50 data-y=50></div>
<div class="textsticky" data-x=100 data-y=100></div>
<div class="textsticky" data-x=150 data-y=150></div>​

CSS:

.textsticky{
    position:absolute;
    background-color:#000000;
    width:10px;height:10px;
}​

ЯШ:

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

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

});​

Answer 3

Чтобы переместить объект внутри родительского контейнера, вам нужно установить positoon: relative; в пределах css .textsticky.

Чтобы переместить объект по всему экрану, вам нужно установить position: absolute;.

Без изменения свойства position значения left и top ничего не сделают.