删除 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变成灰色,里面的所有元素都不可用,包括连接

js一次创建多个div,然后等条件满足时将其全部删除。一定要js

asp.net里面的javascript没有设置隐藏字段值

请问JS怎么获取隐藏div的高度,div设置为display=“none”。谢谢