我已经用拖放jQuery UI做了一件小事情，它可以正常工作，但只有一个问题。
其中我有一个可拖动的div和一个可放置的区域，在拖动div时，当它落在可放置区域上时，会生成一个包含信息的div。这个过程可以正常工作，但是当生成的div太多时，它们超出了可放置区域的范围，并且所有的div都横向生成，那么该怎么处理呢？
以下是我的代码：
CSS：
#draggable_area
{
width: 250px;
height: 250px;
border-radius: 250px;
border : 3px solid black;
position: absolute;
left: 0px;
right: 0px;
}
#droppable_area
{
width: 500px;
height: 500px;
border : 3px solid black;
position: absolute;
left: 25%;
top: 25%;
}
HTML：
<div id="droppable_area"></div>
<div id="draggable_area">
<form id="f1">
<br><br>
<input list="size" name="size1" placeholder="Size" style="max-width:80%" id="size1">
<datalist id="size">
<option value="200x200">
<option value="200x600">
<option value="300x300">
<option value="300x600">
<option value="300x900">
<option value="400x400">
<option value="600x600">
<option value="600x1200">
<option value="800x1200">
<option value="1000x2000">
<option value="200x300">
<option value="250x375">
<option value="300x450">
<option value="300x750">
<option value="300x1200">
<option value="400x800">
<option value="600x900">
<option value="800x800">
<option value="1000x1000">
</datalist>
<br>
<input list="pc" name="pc1" placeholder="Product Category" style="max-width:80%" id="pc1">
<datalist id="pc">
<option value="Ceramic Wall">
<option value="Ceramic/Semi-Porcelian Floor">
<option value="SST/Vitrified Nano">
<option value="Double charge/Multi charge Nano(DC)">
<option value="Vetrified Glazed Tile(GVT)">
<option value="Polished Glazed Vetrified Nano(PGVT)">
<option value="Color Body">
<option value="Stone/Kota Marble & granites">
<option value="Combo Plan">
<option value="Slim Tile">
<option value="Raw Material">
</datalist>
<br>
<input list="ff" name="ff1" placeholder="Feel/Finish" style="max-width:80%" id="ff1">
<datalist id="ff">
<option value="Glossy">
<option value="Special Protection Coat">
<option value="Matt/Suede/Honed">
<option value="Polished Glossy">
<option value="Rustic/Rough Surface">
<option value="Luster">
<option value="Metallic">
<option value="Glazed Polish Nano / Half Polished">
<option value="Lapato/ Sugar /Leather">
</datalist>
<br>
<input list="q1" name="q11" placeholder="Quality" style="max-width:80%" id="q11">
<datalist id="q1">
<option value="Premium">
<option value="Standard">
<option value="Other">
</datalist>
</form>
</div>
JavaScript：
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
var i= 1;
var a;
$('#draggable_area').draggable({
revert: true,
stop: function () {
document.getElementById('f1').reset();
}
});
$('#droppable_area').droppable({
accept: '#draggable_area',
drop: function()
{
var size = document.getElementById('size1').value;
var product_Quality = document.getElementById('pc1').value;
var feel_finish = document.getElementById('ff1').value;
var quality = document.getElementById('q11').value;
console.log(size+" "+product_Quality+" "+feel_finish+" "+quality);
var label1 = document.createElement('label');
var label2 = document.createElement('label');
var label3 = document.createElement('label');
var label4 = document.createElement('label');
var text1 = document.createTextNode(size);
var text2 = document.createTextNode(product_Quality);
var text3 = document.createTextNode(feel_finish);
var text4 = document.createTextNode(quality);
label1.appendChild(text1);
label2.appendChild(text2);
label3.appendChild(text3);
label4.appendChild(text4);
var div = document.createElement('div');
//div.textContent = "Sup, y'all?";
div.setAttribute('class', 'note'+ i );
div.setAttribute('id','n'+i);
var b = 'n'+ i ;
console.log(b)
document.getElementById('droppable_area').appendChild(div);
$('div').draggable({
start: function()
{
a = this.id;
console.log(a);
}
});
document.getElementById(b).appendChild(label1);
document.getElementById(b).appendChild(label2);
document.getElementById(b).appendChild(label3);
document.getElementById(b).appendChild(label4);
document.getElementById(b).style.width = '100px';
document.getElementById(b).style.height = '100px';
document.getElementById(b).style.boxShadow = '10px 10px 10px grey';
document.getElementById(b).style.border = '3px solid black';
i++;
}
});
</script>
请帮助我解决这个问题。
非常感谢您的时间。