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

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代码-

$(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"); 

  }
});