與數據庫PHP和MYSQL可拖動

Question

因此，我正在在線制作視頻游戲，並且我的玩家擁有“廣告資源和個人資料”。

我正在嘗試使其加載到畫布中，然后將Items拖放到其上的任何位置，然后有一個保存按鈕來保存它。

因此，它只會將已添加的項目加載到“房間”中。 因此，可以說我從庫存中將椅子，書桌，床添加到數據庫，房間中。

這些項目應顯示在配置文件中。

但是，如何使它們移動並通過“保存”按鈕拖動呢？

如果您想檢閱這是我的網站。 www.lupekid.com

---

編輯：

如果您查看我的網站，則只能通過PHP Clicks來完成。 但是我正在嘗試將其更改為可拖動，並且不確定從哪里開始。 我正在嘗試這樣做：

jsfiddle.net/jakecigar/v685v9t6/31

但我不確定如何將其與數據庫集成，我對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

讓我們嘗試更改您的表結構。 讓我們有一個表來存儲不同類型的家具，將其命名為furniture_tb ：

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

然后在您的myitems表上，我們將為保存的位置添加更多列，並將itemName列替換為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

因此，當您加載它們時（ 讓我們使用prepared statement ），您可以像這樣（ 使用LEFT JOIN ）來加載所有分配給用戶的家具。 我們還將在style標簽中使用提取的left_position和top_position列，將它們放置在containment-wrapper ：

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

讓我們創建您的jQuery腳本。 我們將獲取每個div.draggable和Ajax的當前位置，以將新位置保存到數據庫中。

/* 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 */
            }
        })            

    })

})

您會注意到，我們將數據傳遞到save-position.php ，因此讓我們創建此文件：

/*** 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 */

}

您可以看一下這個小提琴。 但是在此示例中，它不會保存位置，因為我們沒有用於保存數據的數據庫。

Answer 2

您可以做的是在php中的任何位置編寫html，並在html中使用script標簽為可拖動項創建代碼，這些代碼將通過jquery庫和jquery可拖動插件包括在內。

希望這可以幫助

Answer 3

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

遏制：“父級”，-這是僅用於您要保存的區域。.也許您的物品正站在第一格中，而您只想將其放在第二格中的某處...

  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>

在coordsave.php中，您可以從ajax獲取信息並按位置發送到數據庫。 在您的游戲中，該配置文件添加了帶有類似坐標的項目。 您可以在數據庫中創建新字段作為新項目，並且該字段僅包含職位。 載入所有玩家信息的頁面后，也放置物品位置並顯示出來...