Question

我有一个可以用鼠标拖动图像的网站，所有这些图像都有自己的x和y位置，但我需要将这些值传递到MySQL数据库中。我几乎设法这样做，但所有图像在数据库中获得相同的x和y值。所以这里是我的house.php，它有3个我可以拖动的图像，所有这些图像都有一个增加1的类。所以它是图像：item0，item1，{{1} }

item2

因此，当您使用鼠标移动图像时，PHP会对此脚本运行AJAX调用：（house_ajax.js）

<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值插入数据库（update_house.php）

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

因此，我通过多行代码丢失了此旅程中的每个y和x值。我认为它与<?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++; } ?>中的变量$newX = $_POST['newx'];和$newY = $_POST['newy'];有关，但我不知道该怎么做才能让它工作，我觉得我已经尝试了好几个小时。我希望有人可以帮助我解决这个问题，即使这是一个更大的项目。提前谢谢。

更新：这个位置由JS在名为update_house.php

的文件中绘制

house_position.js

Answer 1

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

您的draggable函数 - 您正在声明函数之外的xPos yPos变量。在这种情况下，您将拖动的任何图片都将更新这些变量 - 我假设您希望每个图像都保存它自己的位置变量....所以创建一个数组或对象将分别保存这些值。
在update_house.php - 您只是更新object_id='1'。你正在用一个WHILE循环包装sqli方法，只有在我不认为你的意思时才会执行。
你正在鼠标上执行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++;
}
});

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

1 个答案: