可拖动数据库 PHP 和 MYSQL

Posted 2023-05-09

【中文标题】可拖动数据库 PHP 和 MYSQL

【英文标题】：Draggable With Database PHP and MYSQL

【发布时间】：2016-10-01 19:39:09

【问题描述】：

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

我正在尝试使其将库存加载到画布中，然后使项目可拖动到其上的任何位置，然后有一个保存按钮来保存它。

所以它只会加载它已经添加到房间中的项目。因此，假设我将库存中的椅子、书桌、床添加到数据库、房间。

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

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

如果您想查看，这是我现在的网站。 www.lupekid.com

---

编辑：

如果您查看我的网站，我只是通过 php Clicks 完成的。但我正在尝试将其更改为 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>';
    

【问题讨论】：

请使用代码符合简单的可重现示例。我们不想注册一个未知来源的游戏，这可能会窃取我们的帐户来测试你想要做什么。

你能告诉我们你的尝试吗？

如果您查看我的网站，我只是通过 PHP 点击完成了它。但是我试图改变它来做 Draggable 我不知道从哪里开始。我试图这样做，jsfiddle.net/jakecigar/v685v9t6/31 但我不确定如何将它与我的数据库集成，我对 jq 不太熟悉

@LupeKid - 你的物品的表结构是什么？

@Logan Wayne，嘿，你的个人资料中的小提琴，正是我需要的：D！ jsfiddle.net/Logan_Wayne/ru1a3npc 。但是我想添加这个新的评论编辑

【参考方案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 表上，我们将为他们保存的位置添加更多列，我们将用fur_id 替换itemName 列：

 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 fiddle。但是在这个例子中它不会保存位置，因为我们没有数据库来保存数据。

【讨论】：

谢谢您尝试将其添加到我的代码中:)，我无法更改表格，因为我使用的是 items.php 包含项目和 ID :P..... 你碰巧有 SKYPE 或即时消息？我可以和你谈谈：我会在今天晚些时候发回这里更新:)

@LupeKid - 让我们continue this discussion in chat.

遗憾的是我没有 20 个代表

@LupeKid - 哇。所以发生了什么事？你在你的项目中尝试过我的答案吗？结果如何？

是的，我能够做到，我修改了您的代码，但现在我不知道如何保存它：P 尽管您非常有帮助并使其成为可能：D 项目现在加载到拖动屏幕 :D ，现在我需要能够保存 em :P Thers an X And​​ Y In the DataBase, ItemID , X , Y .. Ill report back after I try it :), 是这个 mysqli 注入保存 AJAX ??

【参考方案2】：

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

希望对你有帮助

【参考方案3】：

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

containment: 'parent', - 这仅适用于您只想保存的区域。也许您的项目位于 div 1 中，而您只想将其放在 div 2 中的某个位置...

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