1

关于如何保存可拖动 DIV 的位置有很多解决方案，但我没有找到任何有助于在 php 中使用 While 循环的解决方案。

我有一个“需求”数据库，我想显示与个人用户名和状态 = 进行中匹配的所有“需求”。这可能是 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());   
}
4

1 回答 1

8

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>

我使用了一个数据属性来存储“需要”的 id，稍后您可以使用该 id 来存储“需要”在数据库中的位置。

现在如前所述，使用 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");

          //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。在该脚本中，您只需获取发布参数并将它们存储在数据库中。

有一个工作小提琴，当然 ajax 请求不起作用，但您可以在控制台中看到发生了什么。

于 2013-05-01T19:24:58.167 回答