使用php保存Jquery可拖动DIV的位置 [英] Save position of Jquery draggable DIVs using php
问题描述
有很多关于如何保存可拖动DIV位置的解决方案，但我还没有发现任何有助于在php中使用While循环的解决方案。
我有一个需求数据库，我想显示所有匹配个人用户名和status = inprogress的需求。这可能是1需要或1,000,000需要取决于是否满足条件。
我想在移动时自动保存需求（DIV）的位置。这可能吗？如果可以的话，我想使用SQL将值存储在数据库中。
这里我现在的代码显示needs（divs）
<
Header
< link rel =stylesheethref =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 =stylesheethref =/ resources / demos / style.css/>
< style>
#set div {width：90px;身高：90px;填充：0.5em;向左飘浮; margin：0 10px 10px 0; }
#set {clear：both;向左飘浮; width：368px; height：120px; }
p {clear：both;余量：0;填充：1em 0; }
< / style>
< script>
$（function（）{
$（#set div）.draggable（{
stack：#set div
}）;
}） ;
< / script>
Body
< 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< br>
< / div>
;
}
？>
< / div>
插入查询
$ x_coord = $ _ POST [ ×];
$ y_coord = $ _ POST [y];
$ needid = $ _ POST [need_id];
//设置我们的查询
$ sql =更新坐标SET x_pos = $ x_coord，y_pos = $ y_coord其中needid ='$ needid';
//执行我们的查询
if（mysql_query（$ sql））{
echosuccess $ x_coord $ y_coord $ needid;
}
else {
die（Error coords：。mysql_error（））;
您可以使用 stop 可拖动的事件在元素到达新位置时发现。然后，您只需按照文档中的说明获取偏移量。
假设您有类似的设置：
< 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>
我使用了一个数据属性来存储需要的id，稍后可以使用该id将need的位置存储在数据库中。
现在，如前所述，使用stop事件向服务器发送ajax调用需求的id以及它的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）;
//执行ajax调用服务器
$ .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 。在那个脚本中，你只需要抓取post参数并将它们存储在数据库中。
有 工作小提琴 ，当然，ajax请求无法正常工作，但您可以看到控制台中发生了什么。
There are a lot of solutions out there as to how to save the position of draggable DIVs but I haven't found any that will help with using a While loop in php.
I have a database of "needs" and I want to display all the "needs" that match the persons username and status=inprogress. This could be 1 need or 1,000,000 needs depending on if the criteria is met.
I want to save the position of the need (DIV) automatically when it's moved. Is this possible? I wanted to store the values in a database using SQL if I can.
Here the code I currently have that displays the "needs" (divs)
Header
<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>
Body
<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>
Insert Query
$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());
}
You can use the stop event of draggable to get noticed when an element has reached a new position. Then you just have to get the offset as described in the docs.
Assuming you have a setup like that:
<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>
I've used a data attribute to store the id of the "need", you can later on use that id to store the position of the "need" in the database.
Now as mentioned before, use the stop event to send an ajax call to the server with the id of the need and the x and y postion of it. Be aware hat this is the position of the screen so if you have different screen sizes you should probably use positions relative to a parent container with a desired position.
$(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 );
});
}
});
});
This way every time a draggable element reaches a new positions e request will be sent to your_php_script.php. In that script you then only have to grab the post parameters and store them in the database.
There is a working fiddle, of course the ajax request is not working but you can see whats going on in the console.
这篇关于使用php保存Jquery可拖动DIV的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
