Есть много решений о том, как сохранить положение перетаскиваемых DIV, но я не нашел ничего, что поможет с использованием цикла While в php.
У меня есть база данных «потребности», и я хочу отобразить все «потребности», которые соответствуют имени пользователя и статусу = inprogress. Это может быть 1 потребность или 1 000 000 потребностей в зависимости от того, соблюдены ли критерии.
Я хочу сохранить позицию потребности (DIV) автоматически при ее перемещении. Это возможно? Я хотел сохранить значения в базе данных, используя SQL, если смогу.
Здесь код, который я сейчас имею, который отображает «потребности» (divs)
заголовок
<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()); }
Вы можете использовать событие stop draggable, чтобы его заметили, когда элемент достиг новой позиции. Тогда вам просто нужно получить смещение, как описано в документах .
Предполагая, что у вас есть такая настройка:
<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 ); }); } }); });
Таким образом, каждый раз, когда элемент перетаскивания достигает новых позиций, запрос e будет отправлен на your_php_script.php . В этом скрипте вам нужно только захватить параметры сообщения и сохранить их в базе данных.
Существует рабочая скрипка , конечно, запрос ajax не работает, но вы можете видеть, что происходит в консоли.