PHP jQuery realisiert das Ziehen von Ebenen nach Belieben und das sofortige Speichern der Ziehposition_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.

Ich hatte schon einmal einen Artikel: In dem Artikel habe ich die Methode zur Implementierung des Drag-Layouts am Beispiel des Projekts erklärt. Der Unterschied zwischen diesem Artikel und diesem Artikel besteht darin, dass Sie die Seitenposition beliebig ziehen können. Das Prinzip besteht darin, die relative Position links, oben und den Z-Index der gezogenen Ebene durch Ziehen auf den entsprechenden Datensatz zu aktualisieren wird über CSS analysiert. Verschiedene Speicherorte für jede Ebene. Bitte beachten Sie die spezifischen Implementierungsschritte.

MySQL-Datentabelle vorbereiten

Zuerst 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> 

Fügen Sie dann 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"; 

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.