PHP + jQuery: Drag layers at will and instantly save the drag location _ jquery

This article explains how to use PHP + MySQL + jQuery to drag layers at will and save the drag position instantly. Very practical. If you need it, you can refer to it. If you want to drag the layer on the page, you can use the Draggable method of jQuery ui. 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.

In my previous article, the project is used as an example to explain how to implement the drag layout. The difference between this article is that you can drag the location of the page at will. The principle is to drag the relative location of the rear layer left, the top and z-index parameters are updated to the corresponding records in the data table. The pages use CSS to parse different positions on 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.