javascript — установите значение из div в скрытый ввод, когда IMAGE отбрасывается

Question

javascript — установите значение из div в скрытый ввод, когда IMAGE отбрасывается

Я хочу вставить идентификатор упавшего изображения в скрытый ввод, когда оно упало в 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);
}

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

3

dom hidden-field javascript jquery php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Пропускаемый объект JQuery UI имеет событие сброса с обратным вызовом, который получает событие и объект пользовательского интерфейса в качестве параметров. 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

Другие решения

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

вот решение с использованием 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>

2

Источник