I developed a function that generates table seats dynamically with equal spacing. The issue arises when I try to drag names from a list and drop them onto the seats as children. Unfortunately, I can't seem to achieve this functionality with the dynamically created seat divs. Any suggestions on how to solve this?
For better readability, here is the JSBin link: http://jsbin.com/papoqih/edit?html,css,js,output
function createSeating(seatCount){
var space = 1 / seatCount;
var seatingHTML = '';
for( i=0; i<seatCount; i++){
var rotationAngle = (space * 360) * i;
seatingHTML += '<div class="seat-wrap"\ style="transform:rotate('+rotationAngle+'deg);">\ <div class="seat"></div></div>\
</div>'
}
document.querySelector('.seats').innerHTML = seatingHTML;
}
$("select[name=tableCap]").change(function() {
createSeating($(this).val());
});
$(".nameContainer").draggable();
$(".seat").droppable({
drop: function(ev, ui)
{
$(ui.draggable).appendTo($(this))
}
});
$(function(){
createSeating($("select[name=tableCap]").val());
});html, body
{
height: 100%;
}
#seatingChartContainer
{
width: 80%;
height: 100%;
display: inline-block;
position: relative;
float:right;
border: 1px solid black;
}
#seatingChartListContainer
{
width: 20%;
height: 100%;
display: inline-block;
}
.seatingChartListContainer h3
{
width: 20% !important;
}
.seatingChartTable
{
border: 1px solid black;
border-radius: 100%;
position: absolute;
top: 25%;
left:50%;
transform:translate(-50%, -50%);
height: 200px;
width: 200px
}
.seats
{
height: 500px;
}
.seat
{
width: 50px;
height: 50px;
border-radius: 100%;
border: 1px solid black;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
pointer-events: all;
}
.seat-wrap {
height: 50%;
width: 100%;
position: absolute;
pointer-events: none;
transform: translateY(-50%);
}
.nameContainer
{
display: inline-block;
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
</head>
<body>
<div id="seatingChartListContainer">
Number of Seats
<select type="select" id="tableCap" name="tableCap" />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<p>Assigned to Table</p>
<div class="nameContainer">
<img src="http://www.iconsdb.com/icons/preview/black/contacts-xxl.png" width="50" height="50" style="display: inline"/><p style="display: inline">James</p>
</div>
<div class="nameContainer">
<img src="http://www.iconsdb.com/icons/preview/black/contacts-xxl.png" width="50" height="50" style="display: inline"/><p style="display: inline">James</p>
</div>
<div class="nameContainer">
<img src="http://www.iconsdb.com/icons/preview/black/contacts-xxl.png" width="50" height="50" style="display: inline"/><p style="display: inline">James</p>
</div>
<div class="nameContainer">
<img src="http://www.iconsdb.com/icons/preview/black/contacts-xxl.png" width="50" height="50" style="display: inline"/><p style="display: inline">James</p>
</div>
<div class="nameContainer">
<img src="http://www.iconsdb.com/icons/preview/black/contacts-xxl.png" width="50" height="50" style="display: inline"/><p style="display: inline">James</p>
</div>
</div>
<div id="seatingChartContainer">
<div class="seatingChartTableContainer">
<div class="seatingChartTable"></div>
<div class="seats"></div>
</div>
</div>
</div>
</body>
</html>