Установите значение из div в скрытый ввод при удалении ИЗОБРАЖЕНИЯ


Я хочу вставить идентификатор сброшенного изображения в скрытый ввод, когда он будет сброшен в div.

Это 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);
    }


Что не так с моим кодом? Я пытался получить удостоверение личности разными способами, но ни один из них не сработал.
Я даже пробовал их разделять, но тоже безрезультатно.
Вы можете помочь? Заранее благодарю.

Author: Joshua, 2015-04-14
Source

2 answers

Отбрасываемый объект пользовательского интерфейса jQuery имеет событие отбрасывания с обратным вызовом, который получает событие и объект пользовательского интерфейса в качестве параметров. ui.draggable - это массив , содержащий объект, который был перетащен и удален. Итак, чтобы получить идентификатор текущего перетаскиваемого объекта, вы можете использовать: 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" />
 1
Author: jme11, 2015-04-14 00:09:24

Похоже, вы пытаетесь использовать фреймворк пользовательского интерфейса jquery с использованием $().перетаскиваемый();

Вот решение с использованием пользовательского интерфейса jquery

$(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>
 2
Author: dannyshaw, 2015-04-14 06:33:49