我正在使用 DRAG 和 DROP 选项在 具有适当样式的代码的 div 部分。 当我调整窗口大小时，表格也会调整大小，这意味着它工作正常。
但是当表格中的元素数量越来越多时，它会在水平方向上扩展，即使只有 66.67% 的窗口被提供给该 div 元素也是如此。
这是我的代码:
<div class = "container">
<div class="row" >
<div class="col-md-8" >
<h1 >Selected Courses</h1>
<table width = "100%" order="5" cellspacing=0 cellpadding=5>
<tr>
<td width="100%" id="red" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">
<span draggable="true" id="lt1" ondragstart="dragIt(this, event)"><rc>RC</rc></span>
</td>
</tr>
</table>
</div>
<div class="col-md-4" >
<h1 >Select Your Courses</h1>
<table width = "100%" border="5" cellspacing=0 cellpadding=5>
<tr>
<td valign="bottom" align="left" id="holder" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">
<span draggable="true" id="lt" ondragstart="dragIt(this, event)"><cse>CSE114</cse></span>
<span draggable="true" id="srv" ondragstart="dragIt(this, event)"><ams>AMS151 </ams></span>
<span draggable="true" id="mf" ondragstart="dragIt(this, event)"><cse class = "tooltip">CSE214<span class = "classic"><sp>An extension of programming </sp>methodology to data storage and manipulation on complex data sets. Topics include: programming and applications of data structures; stacks, queues, lists, binary trees, heaps, priority queues, balanced trees and graphs. Recursive programming is heavily used. Fundamental sorting and searching algorithms are examined along with informal efficiency comparisons.</span></cse></span>
<span draggable="true" id="ids" ondragstart="dragIt(this, event)"><wrt>WRT101</wrt></span>
<span draggable="true" id="pc" ondragstart="dragIt(this, event)"><ams>PHY131</ams></span>
<span draggable="true" id="ltt" ondragstart="dragIt(this, event)"><ams>PHY133</ams></span>
<span draggable="true" id="srvv" ondragstart="dragIt(this, event)"><ams>AMS161</ams></span>
<span draggable="true" id="idss" ondragstart="dragIt(this, event)"><cse>CSE215</cse></span>
<span draggable="true" id="pcc" ondragstart="dragIt(this, event)"><ams>PHY132</ams></span>
<span draggable="true" id="pccc" ondragstart="dragIt(this, event)"><ams>PHY134</ams></span>
<span draggable="true" id="ids1" ondragstart="dragIt(this, event)"><wrt>WRT102</wrt></span>
</td>
</tr>
</table>
</div>
</div>
</div>
元素正在从右框添加到左框。在这种情况下，当左框中的元素数量越来越多时，它也获得了右框的位置。
这是用于拖放的代码。
<script>
function dragIt(target, e) {
e.dataTransfer.setData('SpanImg', target.id);
}
function dropIt(target, e) {
var id = e.dataTransfer.getData('SpanImg');
target.appendChild(document.getElementById(id));
e.preventDefault();
}
function trashIt(target, e) {
var id = e.dataTransfer.getData('SpanImg');
removeElement(id);
e.preventDefault();
}
function removeElement(id) {
var d_node = document.getElementById(id);
d_node.parentNode.removeChild(d_node);
}
</script>
CSS代码
.title {
color: rgb(0, 207, 255);
}
.description { /* description is a class */
color: rgb(0, 0, 0);
max-width: 705px; /*color attribute*/
}
.screenshot { /* description is a class */
color: red;
max-width: 460px; /*color attribute*/
}
.app {
display: -webkit-flex;
display: flex;
}
text {
font-size: 10px;
}
/*
* {
outline: 1px solid red !important;
}
*/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
table, td
{
border-color: #e6e6e6;
border-style: solid;
}
cse {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(192,0,0,1);
border-radius: 5px;
}
ams {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(128,100,162,1);
border-radius: 5px;
}
wrt {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(155,187,89,1);
border-radius: 5px;
}
rc {
font-family: inherit;
font-size: 2em;
color: white;
padding: 3px 3px 3px 3px;
margin: 0.37em 0.37em 0.37em 0.37em;
font-weight: 500;
line-height: 1.5;
/*outline: 1px solid DeepSkyBlue;*/
background-color: rgba(79,129,189,1);
border-radius: 5px;
}
sp{
font-size: 1.6em;
}
cse:hover {
background-color: rgba(192,0,0,0.4);
font-size: 2em;
}
wrt:hover {
background-color: rgba(155,187,89,0.4);
font-size: 2em;
}
ams:hover {
background-color: rgba(128,100,162,0.4);
font-size: 2em;
}
rc:hover {
background-color: rgba(79,129,189,0.4);
font-size: 2em;
}
.tooltip {
outline: none;
cursor: help;
text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -600em;
position: absolute;
}
.tooltip:hover span {
border-radius: 10px 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 3em;
z-index: 99;
margin-left: -90px;
width: 300px;
font-size: 0.4em;
color: white;
background-color: DeepSkyBlue;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
最佳答案
关于javascript - 当向其中添加更多元素时，插入到 div block 中的表会水平重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31604971/