当它掉落在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,但没有一个工作。
我甚至尝试将它们分开但没有结果。
你能帮我吗?提前谢谢。
答案 0 :(得分:2)
看起来您正在尝试使用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);
}
});
});
&#13;
#rang1 {
width: 300px;
height: 50px;
border: 1px solid black;
}
&#13;
<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>
&#13;
答案 1 :(得分:1)
JQuery UI的可放置对象有一个带有回调的 drop event ,该回调接收事件和ui对象作为参数。 ui.draggable
是一个数组,其中包含被拖放的对象。因此,要获取当前可拖动的ID,您可以使用: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);
}
});
&#13;
* {
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);
}
&#13;
<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" />
&#13;