javascript - 当 IMAGE 被删除时，将 div 中的值设置为隐藏输入

Question

我想在将图像放入 div 时将其 ID 插入到隐藏输入中。

这是 HTML

<td> 
   <div id="rang1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
   <input type="hidden" value="" id="rang1input" name="rang1value">
</td>

--

<td> <?php echo "<img class='DraggedItem' id='".$row["IDPictogram"]."' src='data:image/jpeg;base64,".base64_encode($row['Pictogram'])."' width='90' height='90' draggable='true' ondragstart='drag(event)'>" ?> </td>

这是 JS:

<script type="text/javascript">

    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }
    $(".DraggedItem").draggable({
            helper:'clone', 
            cursor:'move'
    });

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
        $('#rang1input').val($('#rang1').html());

        var elem = document.getElementById("rang1input");
        var div = document.getElementById("rang1");
        elem.value = div.value;
        alert(elem);
    }

我的代码有什么问题？我尝试以不同的方式获取 ID，但都没有用。
我什至尝试将它们分开，但也没有结果。
你能帮我吗？提前致谢。

Answer 1

看起来您正在尝试通过 $().draggable(); 来使用 jquery ui 框架；

这是一个使用 jquery ui 的解决方案

$(function(){

    $(".DraggedItem").draggable({
            helper:'original', 
            cursor:'move',
            revert: true
    });

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

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

#rang1 {
  width: 300px;
  height: 50px;  
  border: 1px solid black;
}

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"> </script>
<table>
<tr>
<td> 
   <div id="rang1"></div> 
   <input type="hidden" value="" id="rang1input" name="rang1value">
</td>
</tr>
<tr>
<td> <img class='DraggedItem' id="testid" src='http://placehold.it/300x50.gif'></td>
</tr>
</table>