Сохранить позицию JQuery draggable DIVs с помощью php

Question

Есть много решений о том, как сохранить положение перетаскиваемых DIV, но я не нашел ничего, что поможет с использованием цикла While в php.

У меня есть база данных «needs», и я хочу отобразить все «потребности», которые соответствуют имени пользователя и статусу = inprogress. Это может быть 1 потребность или 1 000 000 потребностей в зависимости от того, соблюдены ли критерии.

Я хочу сохранить позицию потребности (DIV) автоматически при ее перемещении. Это возможно? Я хотел сохранить значения в базе данных, используя SQL, если смогу.

Вот код, который я в настоящее время, который отображает "потребности" (дивы)


Заголовок

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <style> 
    #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } 
    #set { clear:both; float:left; width: 368px; height: 120px; } 
    p { clear:both; margin:0; padding:1em 0; } 
    </style> 


<script> 
$(function() { 
    $("#set div").draggable({ 
    stack: "#set div" 
    }); 
}); 


</script> 

Тело

<div id="set"> 

<? 

$query = mysql_query("SELECT * FROM needs WHERE (needsusername='$username' OR workerusername='$username') AND status='inprogress'"); 


while ($rows = mysql_fetch_assoc($query)) { 
$title = $rows['titleofneed']; 
$status = $rows['status']; 

echo " 
<div class='ui-widget-content'> 
$title<br>Status: $status<br> 

</div> 
"; 
} 

?> 
</div> 

Вставка запросов

$x_coord=$_POST["x"]; 
$y_coord=$_POST["y"]; 
$needid=$_POST["need_id"]; 

    //Setup our Query 
    $sql = "UPDATE coords SET x_pos=$x_coord, y_pos=$y_coord WHERE needid = '$needid'"; 

    //Execute our Query 
    if (mysql_query($sql)) { 
      echo "success $x_coord $y_coord $needid"; 
     } 
     else { 
     die("Error updating Coords :".mysql_error()); 
} 

Answer 1

Вы можете использовать событие перетаскивания stop, чтобы его заметили, когда элемент достиг новой позиции. Тогда вам просто нужно получить смещение as described in the docs.

Предполагая, что у вас есть настройка так:

<div id="set"> 
    <div data-need="1"></div> 
    <div data-need="2"></div> 
    <div data-need="3"></div> 
    <div data-need="4"></div> 
    <div data-need="5"></div> 
</div> 

Я использовал атрибут данных для хранения идентификатора «необходимости», вы можете в дальнейшем использовании, что идентификатор, чтобы сохранить положение " необходимо "в базе данных.

Теперь, как упоминалось ранее, используйте событие остановки, чтобы отправить вызов ajax на сервер с идентификатором потребности и положением x и y. Помните, что это позиция экрана, поэтому, если у вас разные размеры экрана, вы, вероятно, должны использовать позиции относительно родительского контейнера с желаемой позицией.

$(function() { 
    $("#set div").draggable({ 
    stack: "#set div", 
     stop: function(event, ui) { 
      var pos_x = ui.offset.left; 
      var pos_y = ui.offset.top; 
      var need = ui.helper.data("need"); 

      //Do the ajax call to the server 
      $.ajax({ 
       type: "POST", 
       url: "your_php_script.php", 
       data: { x: pos_x, y: pos_y, need_id: need} 
      }).done(function(msg) { 
       alert("Data Saved: " + msg); 
      }); 
     } 
    }); 
}); 

Таким образом, каждый раз, когда перетаскиваемый элемент достигает новый запрос позиции е будет отправлен your_php_script.php. В этом скрипте вам нужно только захватить параметры сообщения и сохранить их в базе данных.

Существует a working fiddle, конечно, запрос ajax не работает, но вы можете видеть, что происходит в консоли.