1

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());   
}

1 Answer 1

8

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.

17
  • copy and pasted from fiddle and now the boxes don't move. I see where you're going with it though. You see any reason why the boxes won't move?
    – derekshull
    May 1, 2013 at 20:05
  • Not really because I don't know how your code exactly looks like now. jQuery and jQuery UI still included? May 1, 2013 at 20:13
  • Also works on jsbin with exactly your code: jsbin.com/aqucud/2/edit. The only thing I don't have is your css file. May 1, 2013 at 20:20
  • Got that to work. what are the POST names for each data? is it x, y, and need_id? Having trouble putting the pos_x and pos_y and need_id into the sql table.
    – derekshull
    May 1, 2013 at 20:27
  • 1
    No problem. Just in case you need it later. I've made a fiddle with positions relative to the wrapper #set: jsfiddle.net/CAEV5/14 May 1, 2013 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.