Draggable mit Datenbank PHP und MySQL

Question

Also mache ich ein Videospiel online, und meine Spieler haben Inventar und Profile.

Ich versuche, das Inventar in ein Canvas zu laden, und dann die Elemente an beliebiger Stelle schleppen zu lassen, dann gibt es eine Speichern-Schaltfläche, um es zu speichern.

So wird es nur die Items laden, die es bereits in den Raum hinzugefügt hat. Also sagen wir, ich habe einen Stuhl, Schreibtisch, Bett aus dem Inventar in die Datenbank, Raum hinzugefügt.

Diese Elemente sollten im Profil angezeigt werden.

Aber wie kann ich sie bewegen und Draggable mit einem Save Button?

Dies ist meine Website jetzt, wenn Sie es auschecken möchten. www.lupekid.com

---

EDIT:

Wenn Sie auf meiner Website sehen, ich habe es nur obwohl PHP Klicks erledigt. Aber ich versuche es zu ändern, um Draggable zu machen und ich bin mir nicht sicher, wo ich anfangen soll. Ich versuche, es so zu tun:

jsfiddle.net/jakecigar/v685v9t6/31

aber ich bin nicht sicher, wie es mit meiner Datenbank zu integrieren, ich bin nicht so vertraut mit jQuery.

public function DisplayMyBeds2() 
{ 

    $myuserid = $_SESSION['user_id']; 
    // This first query is just to get the total count of rows 
    $sql = "SELECT COUNT(*) FROM myitems WHERE (user_id='$myuserid' AND itemCategory='bed')"; 
    $query = mysqli_query($this->_con, $sql); 
    $row = mysqli_fetch_row($query); 
    // Here we have the total row count 
    $rows = $row[0]; 
    // This is your query again, it is for grabbing just one page worth of rows by applying $limit 
    $sql = "SELECT * FROM myitems WHERE (user_id='$myuserid' AND itemCategory='bed') ORDER BY itemId ASC"; 
    $query = mysqli_query($this->_con, $sql); 
    $list = ''; 
    $count = mysqli_num_rows($row); 

    echo '<div id="message" style="display:none"><h1>Saved!</h1></div>'; 

    while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){ 

     echo ' 
      <div id="containment-wrapper"> 
       <div id="bed'.$row["itemId"].'" class="ui-widget-content draggable" data-left="20px" data-top="20px" style="position: absolute; left:20px; top:20px">'.$row["itemName"].'</div> 
      </div>'; 
    } 

Answer 1

Lets versuchen, ein bisschen Ihre Tabellenstruktur zu ändern. Ermöglicht eine Tabelle, wo man verschiedene Arten von Möbeln speichern, Name lässt es furniture_tb:

fur_id | furniture | fur_image 
--------+-----------+------------- 
    1 | chair | chair.png 
    2 | table | table.png 
    3 | couch | couch.png 
    4 | window | window.png 

Dann auf Ihrem myitems Tisch, werden wir mehr Spalten für ihre gespeicherte Position hinzufügen, und wir werden die itemName Spalte nur mit dem ersetzen fur_id:

itemId | user_id | fur_id | left_position | top_position 
--------+---------+--------+---------------+-------------- 
    1 | 1 | 1 |  20px  |  20px 
    2 | 1 | 2 |  97px  |  102px 
    3 | 1 | 3 |  98px  |  20px 
    4 | 1 | 4 |  176px  |  20px 

Also, wenn Sie sie laden (können prepared statement verwenden), können Sie es so haben kann (LEFT JOIN verwenden), wo i t lädt alle Möbel, die dem Benutzer zugewiesen wurden. Wir werden auch die abgerufenen left_position und top_position Spalte zum style Tag verwenden sie innerhalb des containment-wrapper zu positionieren:

echo '<div id="message" style="display:none"><h1>Saved!</h1></div> 
     <div id="containment-wrapper">'; 

$stmt = $con->prepare("SELECT a.itemId, 
           a.left_position, 
           a.top_position, 
           b.furniture, 
           b.fur_image 
         FROM myitems a 
         LEFT JOIN furniture_tb b ON a.fur_id = b.fur_id WHERE user_id = ?"); 
$stmt->bind_param("i", $myuserid); /* REPLACE THE ? IN THE QUERY ABOVE WITH $myuserid; i STANDS FOR INTEGER */ 
$stmt->execute(); /* EXECUTE QUERY */ 
$stmt->bind_result($itemid, $leftpos, $toppos, $furniture, $furimage); /* BIND THE RESULT TO THESE VARIABLES */ 
while($stmt->fetch()){ /* FETCH ALL RESULTS */ 

    echo '<div id="'.$itemid.'" class="ui-widget-content draggable" style="position: absolute; left:'.$leftpos.'; top:'.$toppos.'">'.$furniture.'</div>'; 

} 
$stmt->close(); /* CLOSE PREPARED STATEMENT */ 

echo '</div><!-- CONTAINMENT-WRAPPER -->'; 

Hier können Sie Ihr Skript jQuery erstellen. Wir werden die aktuelle Position jedes div.draggable und Ajax erhalten, um die neue Position in der Datenbank zu speichern.

/* GRANT THE DIV WITH draggable CLASS TO BE DRAGGABLE */ 
$(document).on("ready", function(){ 
    $(".draggable").draggable({ 
     containment: "#containment-wrapper" 
    }); 
}) 

/* WHEN USER HIT THE SAVE BUTTON */ 
$(document).on("ready", "#save", function(){ 

    $(".draggable").each(function(){ /* RUN ALL FURNITURE */ 

     var elem = $(this), 
      id = elem.attr('id'), /* GET ITS ID */ 
      pos = elem.position(), 
      newleft = pos.left+'px', /* GET ITS NEW LEFT POSITION */ 
      newtop = pos.top+'px'; /* GET ITS NEW TOP POSITION */ 

     $.ajax({ /* START AJAX */ 
      type: 'POST', /* METHOD TO PASS THE DATA */ 
      url: 'save-position.php', /* FILE WHERE WE WILL PROCESS THE DATA */ 
      data: {'id':id, 'newleft': newleft, 'newtop':newtop}, /* DATA TO BE PASSED TO save-position.php */ 
      success: function(result){ 
       $("#message").show(200); /* SHOW THE SUCCESS SAVE MESSAGE */ 
      } 
     })    

    }) 

}) 

Sie werden feststellen, dass wir die Daten zu save-position.php passieren, können so diese Datei erstellen:

/*** INCLUDE YOUR DATABASE CONNECTION HERE FIRST ***/ 

if(!empty($_POST["id"]) && !empty($_POST["newleft"]) && !empty($_POST["newtop"])){ 

    $stmt = $con->prepare("UPDATE myitems SET left_position = ?, top_position = ? WHERE itemId = ?"); /* PREPARE YOUR UPDATE QUERY */ 
    $stmt->bind_param("ssi", $_POST["newleft"], $_POST["newtop"], $_POST["id"]); /* BIND THESE PASSED VARIABLES TO THE QUERY ABOVE; s STANDS FOR STRINGS; i STANDS FOR INTEGER */ 
    $stmt->execute(); /* EXECUTE QUERY */ 
    $stmt->close(); /* CLOSE PREPARED STATEMENT */ 

} 

Sie bei this Geige zum Beispiel aussehen kann. In diesem Beispiel wird die Position jedoch nicht gespeichert, da wir keine Datenbank zum Speichern der Daten haben.

Answer 2

Was können Sie tun, ist Ihre HTML überall in Ihrem php schreiben und in HTML verwenden Script-Tag-Code für Ihre ziehbar Elemente zu erstellen, die Sie über die jQuery-Bibliothek und dem jquery ziehbar Plugin enthalten wird.

hoffe, das hilft

Answer 3

<script type="text/javascript"> 
$(document).ready(function() { 
$("YOUR_ITEM").draggable({ 
containment: 'parent', 

Haltung: ‚Eltern‘, - Dies ist für Bereich, in dem Sie nur gespeichert werden sollen .. Vielleicht möchten Sie dieses Produkt in div stehen ein und yu wollen sie setzen nur irgendwo in div zwei ...

stop: function(event, ui) { 
     var pos_x = ui.offset.left; 
     var pos_y = ui.offset.top; 

     //Do the ajax call to the server 
     $.ajax({ 
      type: "POST", 
      url: "coordsave.php", 
      data: {x: pos_x, y: pos_y} 
     }).done(function(msg) { 
      alert("Data Saved: " + msg); 
     }); 
    } 
}); 
}); 
</script> 

Innerhalb coordsave.php können Sie nur Informationen von Ajax erhalten und an die Datenbank nach Positionen senden. Und auf Ihrem Spiel für das Profil, das Element mit dem Coords wie hinzugefügt. Sie können ein neues Feld in der Datenbank als neues Element erstellen, und dieses Feld enthält nur die Position. Nach der geladenen Seite mit allen Spielerinformationen legen Sie auch Positionen hinzu und zeigen Sie diese an ...