PHP + MySQL + jQuery drag layers at will and save the drag position instantly. Example _ jquery

This article mainly introduces the implementation of PHP + MySQL + jQuery drag layer and instantly save the drag position. If you are interested, refer to the layer on the page you want to drag, you can use the Draggable method of jQuery ui to achieve this. How can you save the position of the drag-down layer? This article provides the answer. This article explains how to use PHP + MySQL + jQuery to drag layers at will and save the drag position instantly.

The principle of this article is to update the left, top, and z-index parameters of the drag-down layer to the corresponding records in the data table. The page uses CSS to parse the different positions of each layer. See the specific implementation steps.
Prepare a 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; 

Insert several records into the table. Note that the xyz field represents a combination of the xyz coordinates of the layer. The format is "x | y | z ".
Drag. php
In drag. php, you need to read the records in the notes table and display them on the drag. php page. The Code is as follows:

Include_once ('connect. php '); // link to the database $ 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. ='
'.W.row='id'}.'.'.html specialchars ($ row ['content']).'
';}

Then, read the $ notes in p.

   <?php echo $notes;?> 
 

Note: I have defined the position in each generated DIV. note, that is, set the left, top, and z-index values of the p.
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;} 

With the style, run drag. php, then you can see several layers arranged on the page, but you cannot drag it because jQuery is also added.
JQuery
First, you must load the jquery library, jquery-ui plug-in, and global. js.