Set the value from the div into a hidden input when IMAGE is dropped

Question

I want t insert the ID of the dropped image into a hidden input when its dropped in the div.

This is the 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>

This is the 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);
    }

What is wrong with my code? I tried to get the ID in different ways and none of them worked.
I even tried them separated but no results either.
Can you help? Thanks in advance.

Answer 1

It looks like you're trying to use the jquery ui framework with the use of $().draggable();

here is a solution using 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>

Answer 2

JQuery UI's droppable object has a drop event with a callback that receives the event and ui object as parameters. ui.draggable is an array that contains the object that was dragged and dropped. So, to get the id of the current draggable, you can use: ui.draggable[0].id.

$(".DraggedItem").draggable({
  cursor: 'move'
});
$("#rang1").droppable({
  drop: function (event, ui) {
    var elemid = ui.draggable[0].id;
    $("#rang1input").val(elemid);
    alert("dropped item has id: " + elemid);
  }
});

* {
    box-sizing: border-box;
    font: bold 25px/150% Arial, Helvetica, sans-serif;
    color: #555;
    text-align: center;
}
#rang1 {
    background-color: #ccc;
    height: 100px;
}
input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    margin: 15px 0;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

<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>
<img class="DraggedItem" id="1" src="http://lorempixel.com/output/abstract-q-c-90-90-8.jpg" width="90" height="90" />
<img class="DraggedItem" id="2" src="http://lorempixel.com/output/abstract-q-c-90-90-7.jpg" width="90" height="90" />
<img class="DraggedItem" id="3" src="http://lorempixel.com/output/abstract-q-c-90-90-6.jpg" width="90" height="90" />
<img class="DraggedItem" id="4" src="http://lorempixel.com/output/abstract-q-c-90-90-3.jpg" width="90" height="90" />
<div id="rang1">Drop Here</div>
<input value="" id="rang1input" name="rang1value" />