Want to drag layers on the page,It can be achieved by draggable method of jquery ui,So how to save the position of the dragged layer?This article will give the answer.This article explains how to use php + mysql + jquery to achieve random drag layers and save the drag position instantly.

The principle of this article is to update the relative positions of the dragged layer left, top, and z-index to the corresponding records in the data table by dragging.The page uses CSS to parse different positions of each layer.Please see the specific implementation steps.

Prepare mysql data table

First you need to prepare a table notes to record the content of the layer,Background color and coordinates.

create table if not exists `notes` (
 `id` int (11) not null auto_increment, `content` varchar (200) not null, `color` enum (" yellow "," blue "," green ") not null default" yellow ", `xyz` varchar (100) default null, primary key (`id`)
) engine=myisam default charset=utf8;

Then insert a few records into the table,Note that the xyz field represents the combination of the xyz coordinates of the layer.The format is "x | y | z".


In drag.php, you need to read the records in the notes table.Displayed in the drag.php page, the code is as follows:

include_once ("connect.php");//Link the database
$query=mysql_query ("select * from notes order by id desc");
while ($row=mysql_fetch_array ($query)) {
  list ($left, $top, $zindex)=explode ("|", $row ["xyz"]);
  <div. $Row ["color"]. "". $Left. "Px;top:". $Top. "Px;z-index:"
. $zindex. "">
    <span>". $Row [" id "].".</span>". Htmlspecialchars ($row [" content "])."

Then the $notes read out are now in the div.

  <?php echo $notes;?>

Note that I have defined the position in each div.note generated,That is, set the left, top, and z-index values ​​of the div.


.demo {position:relative;height:500px;margin:20px;border:1px dotted #d3d3d3}
.note {width:150px;height:150px;position:absolute;margin-top:150px;padding:10px;
.note span {margin:2px}
.yellow {background-color:#fdfb8c;border:1px solid #dedc65;}
.blue {background-color:#a6e3fc;border:1px solid #75c5e7;}
.green {background-color:#a5f88b;border:1px solid #98e775;}

After having the style,Then run drag.php, you can see several layers arranged in the page,But ca n’t drag yet,Because we have to add jquery.


First you need to load the jquery library and the jquery-ui plugin and global.js.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

Then add the code in global.js:

$(function () {
  var tmp;
  $(". note"). each (function () {
    tmp=$(this) .css ("z-index");
    if (tmp>zindex) zindex=tmp;
  make_draggable ($(". note"));
var zindex=0;

In global.js, a variable tmp is first defined in $(function (), and the z-index value of each div.note is determined to ensure that when draggingThe div is at the top layer (that is, the z-index is the maximum value), that is, it will not be covered by other layers.

And set the initial value of zindex to 0.

Next, I wrote a function make_draggable ();this function calls the draggable method of the jquery ui plugin to handle the drag range,Transparency and update operations performed after dragging stops.

function make_draggable (elements) {
  elements.draggable ({
    opacity:0.8,    containment:"parent",    start:function (e, ui) {ui.helper.css ("z-index", ++ zindex);},    stop:function (e, ui) {
      $.get ("update_position.php", {
         x:ui.position.left,         y:ui.position.top,         z:zindex,         id:parseint (ui.helper.find ("span.data"). html ())

When dragged,Set the z-index property of the current layer to the maximum value,That is to ensure that the current layer is on top,Not covered by other layers,And set the drag range and transparency,When you stop dragging,Send an ajax request to the background update_position.php, passing the values ​​of x, y, z and id. Next we look at the processing of update_position.php.

update_position.php saves the drag position

What update_position.php needs to do is,Get the data sent by the foreground through the ajax request,Update the corresponding field contents in the data table.

include_once ("connect.php");
if (! is_numeric ($_ get ["id"]) ||! is_numeric ($_ get ["x"]) ||! is_numeric ($_ get ["y"]) ||
! is_numeric ($_ get ["z"]))
die ("0");
$id=intval ($_ get ["id"]);
$x=intval ($_ get ["x"]);
$y=intval ($_ get ["y"]);
$z=intval ($_ get ["z"]);
mysql_query ("update notes set xyz =" ". $x." | ". $y." | ". $z." "where1";
  • Previous jQuery webpage right side ad follows scrolling code sharing
  • Next Php get regular expression for hyperlink text content (five methods)