Php+mysql+jquery implementation Drag and save drag layer location code share

Php+mysql+jquery implement drag and save drag layer position

If you want to drag a layer on the page, you can do it with the Draggable method of the jquery UI, how do you save the position of the dragged back layer? This article will give an answer. This article explains how to use php+mysql+jquery to drag layers at random and save the drag position instantly. Before...

If you want to drag a layer on the page, you can do it with the Draggable method of the jquery UI, how do you save the position of the dragged back layer? This article will give an answer. This article explains how to use php+mysql+jquery to drag layers at random and save the drag position instantly.

Before I had an article: jquery implements drag layouts and saves the sorting results to the database, with the project as an example, explaining how to implement drag layouts. The difference between this article is that you can drag it arbitrarily
Page position, the principle is by dragging the relative position of the dragged back layer Left,top and Z-index three parameters updated to the corresponding records in the data table, the page through the CSS to resolve the different bits of each layer
Reset Take a look at the specific implementation steps.

Preparing MySQL Data sheet

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

CREATE TABLE IF not EXISTS ' notes ' (' ID ' int (one) not null auto_increment, ' content ' varchar ($) NOT NULL, ' Color ' enum (' Yel Low ', ' blue ', ' green ') is not NULL default ' yellow ', ' xyz ' varchar (+) Default Null,primary KEY (' id ')) engine=myisam default C Harset=utf8

Then insert several records into the table, noting that the XYZ field represents a combination of the XYZ coordinates of the layer in the format "X|y|z".

drag.php

In drag.php, the records in the notes table need to be read and displayed in the Drag.php page with the following code:

Include_once (' connect.php '); Link database $notes = ';  $left = ";  $top = ";  $zindex = ";  $query = mysql_query ("SELECT * from Notes ORDER BY id DESC") and while ($row =mysql_fetch_array ($query)) {    list ($left, $top , $zindex) = Explode (' | ', $row [' XYZ ']);     $notes. = '            . $row [' id '].'. '. Htmlspecialchars ($row [' content ']).    

Then the $notes will be read out in the DIV now.

Note that I defined the location in each div.note that was generated, that is, the left,top and z-index values of the div are set.

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

Once you have the style, and then run drag.php, you can see several layers arranged in the page, but you cannot drag them because you also want to join jquery.

Jquery

The first thing you need to do is load the jquery library and Jquery-ui plugin and global.js.

Then global.js add the code:

$ (function () {var tmp;$ ('. Note '). each (function () {TMP = $ (this). CSS (' Z-index '); if (tmp>zindex) ZIndex = tmp;}) Make_draggable ($ ('. Note '));}); var zIndex = 0;

Global.js, first defines a variable tmp in $ (function (), by judging the Z-index value of each div.note, to ensure that the div is on the topmost level (that is, Z-index is the maximum value), is not overwritten by another layer.

and set the initial value of ZIndex to 0.

Next, write a function make_draggable (); This function calls the Draggable method of the jquery UI plug-in, handles the drag range, transparency, and the update operation that is performed after the drag is stopped.

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, sets the Z-index property of the current layer to the maximum value, which guarantees that the current layer is at the top, is not overwritten by another layer, and that the drag range and transparency are set, and when dragging is stopped, the background
Update_position.php sends an AJAX request that passes parameters with X, Y, z, and ID values. Next, let's see.
Update_position.php of the process.

update_position.php Save Drag position

What update_position.php needs to do is to get the data that the foreground sends from the AJAX request and update the corresponding field contents in the datasheet.

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 ";

