始终从不同的丢弃图像中获取相同的 ID

Question

我有 7 个不同的 div（从 #rang1 到 #rang7），我可以在它们上面放置图像。
带有 class .DraggedItem 的图像来自数据库，并且所有图像
都有不同的 ID。我按正常 fetch_assoc 显示这些图像。如果您有必要
查看执行此操作的代码，请告诉我，以便我可以 post 它。但这确实是常规
fetch_assoc方法。
话不多说，让我们直接进入代码

JS:

<script type="text/javascript">
$(function(){
    $(".DraggedItem").draggable({
            helper:'clone', 
            cursor:'move',
            revert: true
    });

    $('#rang1').droppable({
      drop: function( event, ui ) {
        //$('#rang1input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang1input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang1').append($img);
      }
    });

    $('#rang2').droppable({
      drop: function( event, ui ) {
        //$('#rang2input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang2input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang2').append($img);
      }
    });

    $('#rang3').droppable({
      drop: function( event, ui ) {
        //$('#rang3input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang3input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang3').append($img);
      }
    });

    $('#rang4').droppable({
      drop: function( event, ui ) {
        //$('#rang4input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang4input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang4').append($img);
      }
    });

    $('#rang5').droppable({
      drop: function( event, ui ) {
        //$('#rang5input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang5input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang5').append($img);
      }
    });

    $('#rang6').droppable({
      drop: function( event, ui ) {
        //$('#rang6input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang6input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang6').append($img);
      }
    });

    $('#rang7').droppable({
      drop: function( event, ui ) {
        //$('#rang7input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang7input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang7').append($img);
      }
    });
});
</script>

HTML:

<form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="POST">
<input type="hidden" value="<?php echo $row["IDBewoner"] ?>" name="bewoner">
<td> 
    <div id="rang1"></div> 
    <input type="hidden" value="" id="rang1input" name="rang1value">
</td>
<td> 
    <div id="rang2"></div> 
    <input type="hidden" value="" id="rang2input" name="rang2value">
</td>
<td> 
    <div id="rang3"></div> 
    <input type="hidden" value="" id="rang3input" name="rang3value">
</td>
<td> 
    <div id="rang4"></div> 
    <input type="hidden" value="" id="rang4input" name="rang4value">
</td>
<td> 
    <div id="rang5"></div>
    <input type="hidden" value="" id="rang5input" name="rang5value">
</td>
<td> 
    <div id="rang6"></div> 
    <input type="hidden" value="" id="rang6input" name="rang6value">
</td>
<td> 
    <div id="rang7"></div> 
    <input type="hidden" value="" id="rang7input" name="rang7value">
</td>
<input type="submit" value="Save">
</form>

PHP代码：

<?php 

if($_SERVER["REQUEST_METHOD"] == "POST") {
    $rang1 = $_POST["rang1value"];
    $rang2 = $_POST["rang1value"];
    $rang3 = $_POST["rang1value"];
    $rang4 = $_POST["rang1value"];
    $rang5 = $_POST["rang1value"];
    $rang6 = $_POST["rang1value"];
    $rang7 = $_POST["rang1value"];
    $bewonerID = $_POST["bewoner"];

    echo "<script>alert($rang1)</script>";
    echo "<script>alert($rang2)</script>";
    echo "<script>alert($rang3)</script>";
    echo "<script>alert($rang4)</script>";
    echo "<script>alert($rang5)</script>";
    echo "<script>alert($rang6)</script>";
    echo "<script>alert($rang7)</script>";
    }
?>

问题是我在提交表单时总是得到相同的 ID。
我认为脚本有问题，而不是 php 代码。我尝试以不同的方式获取丢弃图像的
id。我确实有不同的图像
和不同的 ID，但我总是一遍又一遍地得到相同的 ID。

Answer 1

我认为您一直在寻找相同的 POST 值，试试这个：

$rang1 = $_POST["rang1value"];
$rang2 = $_POST["rang2value"];
$rang3 = $_POST["rang3value"];
$rang4 = $_POST["rang4value"];
$rang5 = $_POST["rang5value"];
$rang6 = $_POST["rang6value"];
$rang7 = $_POST["rang7value"];

始终从不同的丢弃图像中获取相同的 ID

ALWAYS Getting the same ID from the different dropped images

html

javascript

php

jquery

drag-and-drop