How do I solve this Javascript/CSS problem?

user_12200842 0
Viewed 95

I want the smaller div box to show up in the larger div.

How it looks initially

However, when I drag and drop it, this is what it looks like:

This

Why isn't the small box's border properly showing in the larger box? I have modified the drop function so that it copies the 2nd div instead of dropping it.

<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>
css html javascript
2 Answers

height="50px" width="50px" doesn't work with the div. It is specific to few tags.

You can set the styles in the following ways for div.

  1. Add CSS styling with class. (Preferred solution)
  2. Add In-line styling for the div, like this. style="width: 100px"

Added the code snippet for your reference.

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>

user_68084740

Hey @Presence as I check the thing which you are saying is working with the HTML and JS which you provided which concludes that you don't have any problem in javascript. Maybe you are facing this issue because of CSS.
You can use the CSS mentioned in the answer or else you can upload your CSS in question from which we can find out which property is giving you the issue.

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>

user_113588910
Related