Question

当我拖动div A 并放下 Drop div时，当我删除div时，表单div #formnew1将会打开。

我使用了onclick功能。但是我想在拖动div时显示#formdiv div

<div style="width:100%;">
    <div class="d">
        <div class="draggable1" style="background-color: black;color:white" id="first">A
            <div style="display: none;width:196px;" id="formnew1">
                <div class="container">
                    <form style="background-color: white;" id="targetinsert1">
                        <center>
                            <input type="hidden" name="website" id="website" value="website"/>
                            <input  type="text" name="targetname" id="targetname" placeholder="Target Name" style="margin-bottom: 3%;"/>
                            <br />
                            <input  type="text" name="targetcontent" id="targetcontent" placeholder="Target Content"/>
                            <input type="submit" name="submit" value="SUBMIT" id="targetinsert1"/>
                            <input  type="button" name="cancel" value="CANCEL" id="cancel" onclick="cancel1();"/>
                        </center>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="d1">
        <div id="droppable"  style="width: 25%;height:100px;background-color:grey;"></div> 
    </div> 
</div>

js code -

$(function () {
    $(".draggable1").draggable({cursor: "crosshair",
    });
});

$("#droppable").droppable({
    drop: function (event, ui) {
        $(".draggable").draggable("disable");
    }
});

演示：https://jsfiddle.net/3ufk0u6u/4/

Answer 1

只需在拖动事件上显示表单div。

$( "#droppable" ).droppable({
  drop: function( event, ui ) {
        jQuery("#formnew1").show();
        $(".draggable").draggable("disable"); 

  }
});

Answer 2

在第6行，drop事件执行一个函数，你需要把你的代码放在这里。

juste补充一下：

$('#formnew1').show()

这里是：https://jsfiddle.net/3ufk0u6u/12/

在拖放div位置拖动div时如何显示表单？

2 个答案: