When creating a table within the div section of the code, I am incorporating text using the DRAG and DROP feature with appropriate styling. The table adjusts in size when I resize my window, indicating that it is functioning correctly.
However, as the number of elements increases in the table, it expands horizontally even though only 66.67% of the window has been allocated to the div element.
Below is the code snippet:
<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>
(more course elements go here)...
</td>
</tr>
</table>;
</div>
</div>
</div>https://i.sstatic.net/nWDXi.png
When dragging elements from the right box to the left, an issue arises where if the number of elements in the left box exceeds its capacity, they overlap into the right box area.
Here is the JavaScript code used for drag and drop functionality:
<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 Styling:
.title {
color: rgb(0, 207, 255);
}
(description, screenshot, app, text, etc...)...