Question

我希望将可拖动项目放在目标上时消失。

以下是我所拥有的：

<!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>

我尝试将此脚本添加到其中： -

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

这会使项目消失，但只要您开始拖动它就会执行此操作。如果你放在任何地方你都看不到它。

我改变了＃34; dragstart＆＃34;到＆＃34;掉落＆＃34;这样可行，但它也会使目标area(div1)消失。

html使拖动项目在drop上消失

0 个答案: