How do I solve this Javascript/CSS problem?

Question

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>

Can you upload your CSS styling as I tried to run your code it's working properly, maybe there will be some issue in your CSS. If you want I can upload my code so that it works. — Aditya toke
– Aditya toke, Commented Jun 2, 2020 at 4:01

Aditya toke · Accepted Answer · 2020-06-02 04:06:34Z

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>

turivishal · Accepted Answer · 2020-06-02 08:51:13Z

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.

Add CSS styling with class. (Preferred solution)
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>

Collectives™ on Stack Overflow

How do I solve this Javascript/CSS problem?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related