PHP MySQL jQuery Ziehen Sie die Ebene nach Belieben und speichern Sie die Ziehposition sofort. Beispiel erklärt_jquery

Wenn Sie eine Ebene auf die Seite ziehen möchten, können Sie die Draggable-Methode der jQuery-Benutzeroberfläche vollständig verwenden. Wie speichert man also die Position der Ebene nach dem Ziehen? Dieser Artikel gibt die Antwort. In diesem Artikel wird erklärt, wie Sie mit PHP MySQL jQuery Ebenen nach Belieben ziehen und die Ziehposition sofort speichern können.

Das Prinzip dieses Artikels besteht darin, die relative Position links, oben und den Z-Index der gezogenen Ebene durch Ziehen auf den entsprechenden Datensatz in der Datentabelle zu aktualisieren. Die Seite analysiert die verschiedenen Positionen jeder Ebene über CSS. Bitte beachten Sie die spezifischen Implementierungsschritte.
MySQL-Datentabelle vorbereiten
Zunächst müssen Sie Tabellennotizen vorbereiten, um den Ebeneninhalt, die Hintergrundfarbe, die Koordinaten und andere Informationen aufzuzeichnen.

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; 

Fügen Sie dann mehrere Datensätze in die Tabelle ein. Beachten Sie, dass das xyz-Feld die Kombination der xyz-Koordinaten der Ebene im Format „x|y|z“ darstellt.
drag.php
In Drag.php müssen Sie die Datensätze in der Notiztabelle lesen und auf der Drag.php-Seite anzeigen. Der Code lautet wie folgt:

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

Dann befinden sich die gelesenen $notes nun im div.

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

Beachten Sie, dass ich die Position in jeder generierten DIV.note definiere, d. h. die linken, oberen und Z-Indexwerte des div festlege.
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;} 

Nachdem Sie den Stil festgelegt haben, führen Sie „drag.php“ aus. Zu diesem Zeitpunkt werden mehrere auf der Seite angeordnete Ebenen angezeigt, Sie können diese jedoch noch nicht ziehen, da jQuery hinzugefügt werden muss.
jQuery
Zuerst müssen Sie die JQuery-Bibliothek, das JQuery-UI-Plug-In und Global.js laden.

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

Dann fügen Sie den Code zu global.js hinzu:

$(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 wird zunächst eine Variable tmp in $(function()) definiert. Durch die Beurteilung des Z-Index-Werts jeder div.note wird sichergestellt, dass sich der DIV auf der obersten Ebene befindet (d. h. z-). Index) beim Ziehen ist der Maximalwert, d. h. er wird nicht von anderen Ebenen verdeckt
. Und setzen Sie den Anfangswert von zIndex auf 0.
Als nächstes habe ich eine Funktion make_draggable() geschrieben; diese Funktion ruft die Draggable-Methode des jQuery-UI-Plug-Ins auf, um den Ziehbereich, die Transparenz und die Aktualisierungsvorgänge zu verarbeiten, die nach dem Stoppen des Ziehens ausgeführt werden.

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

Stellen Sie beim Ziehen das Z-Index-Attribut der aktuellen Ebene auf den Maximalwert ein, d. h. stellen Sie sicher, dass sich die aktuelle Ebene oben befindet und nicht von anderen Ebenen verdeckt wird, und legen Sie den Ziehbereich und die Transparenz fest Hören Sie auf zu ziehen. Senden Sie eine Ajax-Anfrage an den Hintergrund update_position.php und übergeben Sie die Parameter x, y, z und id-Werte. Schauen wir uns als nächstes die Verarbeitung von update_position.php an.
update_position.php speichert die Ziehposition
Was update_position.php tun muss, ist, die von der Rezeption per Ajax-Anfrage gesendeten Daten abzurufen und den entsprechenden Feldinhalt in der Datentabelle zu aktualisieren.

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

Oben geht es darum, wie PHP MySQL jQuery das Ziehen von Ebenen nach Belieben implementiert und die Ziehposition sofort speichert. Ich hoffe, es wird für das Lernen aller hilfreich sein.