PHP jQuery realizes dragging layers at will and saving the drag position instantly_jquery

If you want to drag a layer on the page, you can completely use the Draggable method of jQuery ui. So how to save the position of the layer after dragging? This article will give the answer. This article explains how to use PHP MySQL jQuery to drag layers at will and save the drag position instantly.

I had an article before: In the article, I explained the method of implementing drag layout using the project as an example. The difference between this article and this article is that you can drag the page position arbitrarily. The principle is to update the relative position left, top and z-index of the dragged layer to the corresponding record in the data table through dragging. The page is parsed through CSS. Different locations for each layer. Please see the specific implementation steps.

Prepare MySQL data table

First, you need to prepare a table notes to record the layer content, background color, coordinates and other information.

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 several records into the table. Note that the xyz field represents the combination of the xyz coordinates of the layer, in the format of "x|y|z".

drag.php

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

include_once('connect.php'); //链接数据库 
$notes = '';  
$left='';  
$top='';  
$zindex='';  
$query = mysql_query("select * from notes order by id desc"); 
while($row=mysql_fetch_array($query)){ 
  list($left,$top,$zindex) = explode('|',$row['xyz']); 
  $notes.= ' 
  <div class="note '.$row['color'].'" style="left:'.$left.'px;top:'.$top.'px;z-index:' 
.$zindex.'"> 
    <span class="data">'.$row['id'].'.</span>'.htmlspecialchars($row['content']).' 
  </div>'; 
} 

Then the read $notes will now be in the div.

<div class="demo"> 
  <&#63;php echo $notes;&#63;> 
</div> 

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

CSS

.demo{position:relative; height:500px; margin:20px; border:1px dotted #d3d3d3} 
.note{width:150px; height:150px; position:absolute; margin-top:150px; padding:10px; 
 overflow:hidden; cursor:move; font-size:16px; line-height:22px;} 
.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 you have the style, run drag.php. At this time, you can see several layers arranged on the page, but you cannot drag them yet because jQuery needs to be added.

jQuery

First you need to load the jquery library, jquery-ui plug-in 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 to 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()). By judging the z-index value of each div.note, it is ensured that the DIV is at the top level (i.e. z-index) when dragging. 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 plug-in to handle the drag range, transparency, and update operations performed after the drag 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 dragging, set the z-index attribute of the current layer to the maximum value, that is, ensure that the current layer is at the top and 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 parameters x, y, z and id values. Next let's look at the processing of update_position.php.
update_position.php saves the drag position
What update_position.php needs to do is to obtain the data sent by the front desk through ajax request and 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."' WHERE id=".$id); 
 
echo "1"; 

The above is the entire content of this article, I hope you all like it.