如何解决这个 Javascript/CSS 问题？
[英]How do I solve this Javascript/CSS problem?
问题描述
I want the smaller div box to show up in the larger div.
我希望较小的 div 框显示在较大的 div 中。
However, when I drag and drop it, this is what it looks like:但是，当我拖放它时，它是这样的：
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.我已经修改了 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>
2 个解决方案
解决方案1
1 2020-06-02 04:02:15
height="50px" width="50px" doesn't work with the div . height="50px" width="50px"不适用于div 。 It is specific to few tags.它特定于少数标签。
You can set the styles in the following ways for div. styles可以通过以下方式设置div。
- Add CSS styling with class.使用 class 添加 CSS 样式。 (Preferred solution) （首选解决方案）
- Add In-line styling for the div, like this.像这样为 div 添加内联样式。
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>
解决方案2
1 2020-06-02 04:06:34
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.嘿@Presence，因为我检查了您所说的正在使用您提供的 HTML 和 JS，得出的结论是您在 javascript 中没有任何问题。 Maybe you are facing this issue because of CSS.也许您因为 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.您可以使用答案中提到的 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.