1

ドラッグ可能な DIV の位置を保存する方法については多くの解決策がありますが、php で While ループを使用するのに役立つ解決策は見つかりませんでした。

「ニーズ」のデータベースがあり、人のユーザー名とステータス = 進行中と一致するすべての「ニーズ」を表示したいと考えています。これは、基準が満たされているかどうかに応じて、1 ニーズまたは 1,000,000 ニーズになる可能性があります。

必要な位置（DIV）を移動したときに自動的に保存したい。これは可能ですか？可能であれば、SQL を使用してデータベースに値を保存したかったのです。

ここに、「ニーズ」（div）


ヘッダーを表示する現在のコードがあります

<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

stopdraggableのイベントを使用して、要素が新しい位置に到達したときに通知を受けることができます。次に、 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>

「必要」の ID を格納するためにデータ属性を使用しました。後でその ID を使用して、「必要」の位置をデータベースに格納できます。

前述のように、停止イベントを使用して、必要な ID とその x および y 位置を指定して ajax 呼び出しをサーバーに送信します。これは画面の位置であることに注意してください。異なる画面サイズを使用している場合は、親コンテナーを基準にした位置を希望の位置で使用する必要があります。

$(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 に答える