Ravi Vasani Ravi Vasani - 6 months ago 23
jQuery Question

Drag and Drop jquery UI

I have made one small thing using drag and drop jquery ui it works fine but it has only one issue.

In it i have one draggable div and one droppable area when draggable div drop on droppable area in it one div containing information generated this thing work properly but when too many div generated, they goes out of bound of droppable area and all div are generated horizontally, so how to deal with it?

Here is my code:

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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<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> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

<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>


Please help me with this.
Thank you so much for your time.

Answer

If you are trying to get the elements inside the container, you could add the following code to the end of the styling section. This would line all the new elements horizontally and will get stacked.

document.getElementById(b).style.float = 'left';

The following is the updated jsfiddle.

jsfiddle

If you want to restrict adding after the container is full, you would need to write a separate logic to identify that.