如何解决这个 Javascript/CSS 问题？

Question

我希望较小的 div 框显示在较大的 div 中。

最初的样子

但是，当我拖放它时，它是这样的：

为什么小盒子的边框没有正确显示在大盒子里？ 我已经修改了 drop function 以便它复制第二个 div 而不是删除它。

<html>
    <head>
        <script>
            function remove(id){
                //var el = document.getElementById("r1").outerHTML = "";
                var element = document.getElementById(id);
                element.parentNode.parentNode.removeChild(element.parentNode);
                console.log('Removed')
            }

            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");
                var nodeCopy = document.getElementById(data).cloneNode(true);
                nodeCopy.id = 'something';
                ev.target.appendChild(nodeCopy);
            }
        </script>
    </head>
    <body>
        <p>Drag the W3Schools image into the rectangle:</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        <div id = "drag1" draggable="true" ondragstart="drag(event)" height="50px" width="50px">
            <span id="yo" class="fa fa-close cross" onclick="remove(this.id);"></span>
        </div>
    </body>
</html>

Answer 1

height="50px" width="50px"不适用于div 。 它特定于少数标签。

styles可以通过以下方式设置div。

使用 class 添加 CSS 样式。 （首选解决方案）
像这样为 div 添加内联样式。 style="width: 100px"

添加了代码片段供您参考。

 function remove(id){ //var el = document.getElementById("r1").outerHTML = ""; var element = document.getElementById(id); element.parentNode.parentNode.removeChild(element.parentNode); console.log('Removed') } 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"); var nodeCopy = document.getElementById(data).cloneNode(true); nodeCopy.id = 'something'; ev.target.appendChild(nodeCopy); }

 .box{ border: 1px solid black; }.big{ width: 120px; height: 50px; }.small{ width: 80px; height: 30px; }

 <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" class="big box" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div id="drag1" class="small box" draggable="true" ondragstart="drag(event)"> <span id="yo" class="" onclick="remove(this.id);">x</span> </div>

Answer 2

嘿@Presence，因为我检查了您所说的正在使用您提供的 HTML 和 JS，得出的结论是您在 javascript 中没有任何问题。 也许您因为 CSS 而面临这个问题。
您可以使用答案中提到的 CSS 或者您可以上传有问题的 CSS，我们可以从中找出哪个属性给您带来问题。

 function remove(id) { //var el = document.getElementById("r1").outerHTML = ""; var element = document.getElementById(id); element.parentNode.parentNode.removeChild(element.parentNode); console.log("Removed"); } 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"); var nodeCopy = document.getElementById(data).cloneNode(true); nodeCopy.id = "something"; ev.target.appendChild(nodeCopy); }

 .dropDiv { height: 15vh; border: 2px solid grey; }.dragDiv { height: 9vh; border: 2px solid grey; width: 53vw; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <title>Document</title> </head> <body> <p>Drag the W3Schools image into the rectangle.</p> <div class="dropDiv" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <div class="dragDiv" id="drag1" draggable="true" ondragstart="drag(event)" height="50px" width="50px"> <span id="yo" class="fa fa-close cross" onclick="remove(this;id)."></span> </div> <script src="./index.js"></script> </body> </html>

如何解决这个 Javascript/CSS 问题？

问题描述

2 个解决方案

解决方案1
1 2020-06-02 04:02:15

解决方案2
1 2020-06-02 04:06:34

如何解决这个 Javascript/CSS 问题？

问题描述

2 个解决方案

解决方案1 1 2020-06-02 04:02:15

解决方案2 1 2020-06-02 04:06:34

解决方案1
1 2020-06-02 04:02:15

解决方案2
1 2020-06-02 04:06:34