Javascript 在DB中插入正确的x和y值

我有一个网站，你可以用鼠标拖动图片，所有这些图片都有自己的x和y位置，但我需要将这些值传递到MySQL数据库中。我几乎做到了这一点，但所有图像在数据库中都获得相同的x和y值。 这是我的

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脚本将x和y值插入数据库 （更新_house.php）

---

我不确定你到底在做什么，但这里有一些想法：

您的

draggable

函数-您在函数外部声明

xPos-yPos

变量。在这种情况下，您拖动的任何图片都将更新这些变量-我假设您希望每个图像都保存自己的位置变量。。。。因此，创建一个数组或对象，分别保存这些值

在

update\u house.php

-您只更新

对象\u id='1'

。您正在用WHILE循环包装sqli方法，该循环只执行一次，我不认为这是您的意思

您正在执行鼠标悬停的

houseAjax（）

？？？我认为最好在拖动停止时执行它，只需将函数调用添加到draggable方法的stop部分（在末尾）

我打赌是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>

<?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.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>

<?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++;
}
});

var xPos=new Array（）；
xPos[0]=0；
xPos[1]=0；
xPos[2]=0；
var yPos=新数组（）；
yPos[0]=0；
yPos[1]=0；
yPos[2]=0；
var offset=新数组（）；
偏移量[0]=0；
偏移量[1]=0；
偏移量[2]=0；
var项目编号=0；
$（文档）.ready（函数（）{
while（item_numbery）您从不传递您正在移动的对象的id，因此您始终只使用的id更新对象1@cmorrissey你能在代码中指定更接近的位置吗？可能是
{newx:xPos，newy:yPos}中的JS变量xPos，yPos有问题
向我们展示如何获取当前数据position@ShlomiHassid我已经添加了获取当前位置的JS。感谢您的帮助。我看到您添加了很多，我将仔细查看；同时，我测试了您的代码，它不会将任何图像位置更新到数据库中，它只是保持与数据库保持相同的位置当图像被拖动时，没有任何更新更新：我将尝试更新停止拖动功能。是的，它可能不起作用。你必须根据你的代码正确地调整它。这只是我提到的三个想法的一个例子……是的，但你似乎非常理解它，你提到的三个想法正是我所相信的我的代码有误。如果你愿意，我可以给你发送一个链接来查看它？这可能会更容易，因为我认为你已经很接近正确的方向了发送给我-如果你完全按照我编写的方式更新代码（所有文件），会发生什么情况。请更新并添加一个表方案和数据示例
<?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;
        }
?>

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++;
}
});