Javascript html使拖放项在拖放时消失_Javascript_Html_Drag And Drop

Javascript html使拖放项在拖放时消失

javascript html

Javascript html使拖放项在拖放时消失,javascript,html,drag-and-drop,Javascript,Html,Drag And Drop,我想让可拖动的物品在掉落到目标上时消失以下是我所拥有的： <!DOCTYPE HTML> <html> <head> <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } #

我想让可拖动的物品在掉落到目标上时消失

以下是我所拥有的：

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }

        #div2 {
            width: 100px;
            height: 30px;
            padding: 10px;
            border: 3px solid #aaaaaa;
            position: absolute;
            left: 10px;
            top: 240px
        }

        #draggable {
            width: 100px;
            height: 30px;
            padding: 10px;
            border: 3px solid #aaaaaa;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
    <p>Drag the item into the rectangle:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <div id="draggable" draggable="true" ondragstart="drag(event)" width="100" height="30">This is a draggable item</div>
    <div id="div2"></div>
</body>
</html>

这会使项目消失，但在您开始拖动它时它会立即消失。如果你把它扔到任何你看不见的地方

我将“dragstart”改为“drop”，这样做有效，但也会使目标

区域（div1）

消失。

@erik不确定您编辑了什么，但它仍然是相同的。您可以看到他编辑了什么。不确定那里发生了什么，因为已编辑的位不在我的原始副本上。问题仍然存在。当你开始拖动它时，它会消失。我不希望发生这种情况。只在目标上消失一次。我希望你从目标上删除该项目，因为它是不可见的，所以不是理想的解决方案。@erik不确定你编辑了什么，但它仍然是相同的。你可以看到他编辑了什么。不确定那里发生了什么，因为已编辑的位不在我的原始副本上。问题仍然存在。当你们开始拖动它时，它会消失。我不希望发生这种情况。只在目标上消失一次。我把它从目标上扔下来，它是不可见的，所以不是理想的解决方案。

document.addEventListener("dragstart", function(event)  {
    event.target.style.opacity = "0.0";
});