在數據庫中插入正確的x和y值

Question

我有一個網站，上面有可以用鼠標拖動的圖像，所有這些圖像都有自己的x和y位置，但是我需要將這些值傳遞到MySQL數據庫中。 我幾乎設法做到了，但是所有圖像在數據庫中都得到相同的x和y值。 house.php ，這是我的house.php ，其中包含3張可以拖動的圖像，所有這些圖像都有一個以1遞增的類。所以它是圖像： item0 ， item1 ， item2

<div id="house_wall1">
     <?php if (login_check($mysqli) == true) : ?>
        <?php // echo htmlentities($_SESSION['username']); 

        $n = 0;
        $item_number = 0;
        //Array which iterates over all objects in a given users object_id
        $objects[$n];

        for ($i = 0; $i < $rowsize; $i++) {
            if ($i == $objects[$n]) {
                $stmt = $mysqli->stmt_init();
                $stmt->prepare('SELECT x, y, src FROM house_room1 INNER JOIN objects ON house_room1.object_id=objects.object_id WHERE objects.object_id = ?'); 
                $stmt->bind_param('i', $i
                );
                if ($stmt->execute()) {
                    $stmt->bind_result($x, $y, $src);
                    while($stmt->fetch()) {
                        echo '<img onMouseOver="houseAjax()" src="' . $src . '" class="item' . $item_number . '" style="position:relative; left:' . $x . 'px; top:' . $y . 'px;">';
                    }
                } else {
                    echo 'Something went terrible wrong' . $mysqli->error;
                }
                $stmt->close();
                $n++;
                $item_number++;
            }
        }
        ?>

        <!-- <div id="start"></div> -->
        <!-- <div id="stop"></div> -->
        <ul>
            <li id="posX"></li>
            <li id="posY"></li>
        </ul>
        <!-- <button onclick="houseAjax()">Save positions</button> -->
    </div>

因此，當您使用鼠標在圖像上移動時，PHP將對此腳本運行AJAX調用：（house_ajax.js）

    function houseAjax(){
    var xmlhttp;
    if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            $.post("update_house.php",{newx: xPos, newy: yPos},function(result){
              });
        }
    }
    xmlhttp.open("POST","update_house.php", true);
    xmlhttp.send();
}

...使用該PHP腳本將x和y值插入數據庫（update_house.php）

    <?php
        require_once('includes/db_connect.php');

        $newX = $_POST['newx'];
        $newY = $_POST['newy'];

    $object_id = 1;
    $i = 1;
    while($i < 2) {

        /* Register a prepared statement */
        if ($stmt = $mysqli->prepare('UPDATE house_room1 SET x = ?, y = ? WHERE user_id=? AND object_id=?')) {

            /* Bind parametres */
            $stmt->bind_param('iiii', $newX, $newY, $user_id, $object_id);

                /* Insert the parameter values */
                $user_id = 1;
                $object_id = $i;

                /* Execute the query */
                $stmt->execute();

                /* Close statement */
                $stmt->close();

            } else {
                /* Something went wrong */
                echo 'Something went terribly wrong'     . $mysqli->error;
            }
            $object_id++;
            $i++;
    }
?>

因此，在此過程中，我通過大量代碼行丟失了每個y和x值。 我認為這與變量$newX = $_POST['newx']; 和$newY = $_POST['newy']; 在update_house.php但是我不知道該怎么做才能update_house.php正常工作，我感覺我已經嘗試了好幾個小時。 我希望有人可以幫助我解決這個問題，即使這是您需要注意的較大項目之一。 提前致謝。

更新：位置在此名為house_position.js文件中由JS house_position.js

var offset = 0,
        xPos = 0,
        yPos = 0,
        item_number = 0;

$(document).ready(function(){

    while(item_number<3) {
        $('.item' + item_number ).draggable({

        containment: '#house_wall1',

        drag: function(){
            offset = $(this).position();
            xPos = offset.left;
            yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        },

        // Find original position of dragged image.
        start: function(event, ui) {
            // Show start dragged position of image.
            var Startpos = $(this).position();
            $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
        },

        // Find position where image is dropped.
        stop: function(event, ui) {
            // Show dropped position.
            var Stoppos = $(this).position();
            $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
        }
    });
    item_number++;
    }
});

Answer 1

我不確定您在做什么，但是這里有一些想法：

1. 您的draggable函數-您正在函數外部聲明xPos yPos變量。 在這種情況下，您將拖動的任何圖片都會更新這些變量-我假設您希望每個圖像都保存自己的位置變量...。因此，請創建一個將單獨保存這些值的數組或對象。
2. 在您的update_house.php您僅更新object_id='1' 。 您正在用一個WHILE循環包裝sqli方法，該循環只會在我認為您的意思不正確時執行。
3. 您正在鼠標懸停時執行houseAjax() ？？？ 我認為您最好在拖動停止處執行它，只需將函數調用添加到可拖動方法的停止部分（在末尾）即可。

我敢打賭它的1 。

這是我的版本（未經測試〜無法測試）-從這里開始是一個好地方：

house.php：

<div id="house_wall1">
 <?php if (login_check($mysqli) == true) : ?>
    <?php // echo htmlentities($_SESSION['username']); 

    $n = 0;
    $item_number = 0;
    //Array which iterates over all objects in a given users object_id
    $objects[$n];

    for ($i = 0; $i < $rowsize; $i++) {
        if ($i == $objects[$n]) {
            $stmt = $mysqli->stmt_init();
            $stmt->prepare('SELECT x, y, src FROM house_room1 INNER JOIN objects ON house_room1.object_id=objects.object_id WHERE objects.object_id = ?'); 
            $stmt->bind_param('i', $i
            );
            if ($stmt->execute()) {
                $stmt->bind_result($x, $y, $src);
                while($stmt->fetch()) {
                    echo '<img src="' . $src . '" class="item' . $item_number . '" style="position:relative; left:' . $x . 'px; top:' . $y . 'px;">';
                }
            } else {
                echo 'Something went terrible wrong' . $mysqli->error;
            }
            $stmt->close();
            $n++;
            $item_number++;
        }
    }
    ?>

    <!-- <div id="start"></div> -->
    <!-- <div id="stop"></div> -->
    <ul>
        <li id="posX"></li>
        <li id="posY"></li>
    </ul>
    <!-- <button onclick="houseAjax()">Save positions</button> -->
</div>

house_ajax.js

    function houseAjax(object_id){
var xmlhttp;
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        $.post("update_house.php",{newx: xPos[object_id], newy: yPos[object_id], object_id: object_id},function(result){
          });
    }
}
xmlhttp.open("POST","update_house.php", true);
xmlhttp.send();

}

update_house.php：

<?php
    require_once('includes/db_connect.php');

    $newX = $_POST['newx'];
    $newY = $_POST['newy'];

    $object_id = $_POST['object_id'];

    /* Register a prepared statement */
    if ($stmt = $mysqli->prepare('UPDATE house_room1 SET x = ?, y = ? WHERE user_id=? AND object_id=?')) {

        /* Bind parametres */
        $stmt->bind_param('iiii', $newX, $newY, $user_id, $object_id);

            /* Insert the parameter values */
            $user_id = 1;

            /* Execute the query */
            $stmt->execute();

            /* Close statement */
            $stmt->close();

        } else {
            /* Something went wrong */
            echo 'Something went terribly wrong'     . $mysqli->error;
        }
?>

house_position.js：

var xPos=new Array();
    xPos[0] = 0;
    xPos[1] = 0;
    xPos[2] = 0;

var yPos=new Array();
    yPos[0] = 0;
    yPos[1] = 0;
    yPos[2] = 0;

var offset=new Array(); 
    offset[0] = 0;
    offset[1] = 0;
    offset[2] = 0;

var item_number = 0;

$(document).ready(function(){

  while(item_number<3) {
    $('.item' + item_number ).draggable({

    containment: '#house_wall1',

    drag: function(){
        var cur1 = item_number;
        offset[cur1] = $(this).position();
        xPos[cur1] = offset[cur1].left;
        yPos[cur1] = offset[cur1].top;
        $('#posX').text('x: ' + xPos[cur1]);
        $('#posY').text('y: ' + yPos[cur1]);
    },

    // Find original position of dragged image.
    start: function(event, ui) {
        // Show start dragged position of image.
        var Startpos = $(this).position();
        $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
    },

    // Find position where image is dropped.
    stop: function(event, ui) {
        // Show dropped position.
        var cur2 = item_number;
        var Stoppos = $(this).position();
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
        // save new position:
        houseAjax(cur2);
    }
});
item_number++;
}
});