Question

所以我在线制作一个视频游戏，我的玩家有库存和个人资料。

我正在尝试将它加载到画布中，然后将Items Draggable放在任何位置，然后有一个Save按钮来保存它。

因此它只会将已添加的项目加载到房间中。所以我可以说我从库存中添加了一张椅子，桌子，床，数据库，房间。

这些项目应显示在个人资料中。

但是如何使用保存按钮使它们移动和拖拽？

如果你想查看它，这是我的网站。 www.lupekid.com

修改

如果你看看我的网站，我只通过PHP点击完成了它。但我正在尝试将其改为Draggable，我不知道从哪里开始。我试着这样做：

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 ）来加载它们分配给用户的所有家具。我们还会将获取的left_position和top_position列添加到style标记，以将其置于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 */

}

例如，您可以查看this小提琴。但它不会保存此示例中的位置，因为我们没有数据库来保存数据。

Answer 2

你可以做的是在你的php和html使用中的任何地方写你的HTML 脚本标记为您的可拖动项创建代码，您将通过jquery库和jquery draggable插件包含这些代码。

希望这有帮助

Answer 3

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

遏制：＆＃39;父母＆＃39;， - 这是你想要保存的区域..也许你的项目是站在div一个，而你想把它只放在div二里面...

  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获取信息并按位置发送到数据库。并且在你的游戏中为该配置文件添加了类似于coords的项目。您可以在数据库中创建新字段作为新项目，该字段仅包含位置。加载页面后，所有玩家信息也放置项目位置并显示出来......

可以使用数据库PHP和MYSQL进行拖拽

3 个答案: