删除 IMAGE 时将 div 中的值设置为隐藏输入
Posted
技术标签:
【中文标题】删除 IMAGE 时将 div 中的值设置为隐藏输入【英文标题】:Set the value from the div into a hidden input when IMAGE is dropped 【发布时间】:2015-06-19 09:58:40 【问题描述】:我想在将拖放图像的 ID 插入 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);
我的代码有什么问题?我尝试以不同的方式获取 ID,但都没有奏效。我什至尝试将它们分开,但也没有结果。 你能帮我吗?提前致谢。
【问题讨论】:
【参考方案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>
【讨论】:
先生非常感谢您的帮助,我现在将尝试代码并告诉您结果如何。但关键是图像保留在 div 中。我有一个问题:如果我提交表单,值会在隐藏输入中吗? 你能解释一下你的意思是“关键是图像保留在 div 中”吗?您想拖放图像以在拖动时不被克隆而是移动原始图像?这只是可拖动的选项(助手:'original')。我会更新,更多信息请查看the docs。 我的意思是将从原始图片中获取一个克隆,当您将其放入 div 中时,它仍保留在 div 中。这是关于制定方案,用户必须看到 div 中的图片。图像的值和 id 是后端(我可以进一步编程) 您的帖子中没有提到该要求,可放置的放置事件处理程序传递了一个 ui 参数,该参数具有对“帮助器”(被拖动的元素)的引用,您可以使用它来创建被丢弃的元素。我已使用此解决方案再次更新了此示例,但请接受此答案,如果您有其他要求,请尝试通过文档解决它们,并在遇到问题时打开特定于该要求的新问题。【参考方案2】:JQuery UI 的 droppable 对象有一个 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);
);
*
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" />
<img class="DraggedItem" id="2" src="http://lorempixel.com/output/abstract-q-c-90-90-7.jpg" />
<img class="DraggedItem" id="3" src="http://lorempixel.com/output/abstract-q-c-90-90-6.jpg" />
<img class="DraggedItem" id="4" src="http://lorempixel.com/output/abstract-q-c-90-90-3.jpg" />
<div id="rang1">Drop Here</div>
<input value="" id="rang1input" name="rang1value" />
【讨论】:
我刚醒来测试你的代码,它对我不起作用。可能是我太困了……不过非常感谢你的帮助,等我醒来再试试。以上是关于删除 IMAGE 时将 div 中的值设置为隐藏输入的主要内容,如果未能解决你的问题,请参考以下文章
单击时隐藏和显示 div,带有绝对位置的动画,并在隐藏时将其删除
如何用js设置div中元素不可用,就是整个DIV变成灰色,里面的所有元素都不可用,包括连接