我创建了一个函数，可以动态地在 table 周围生成均匀分布的座位。问题是我想从列表中拖出名字并将它们作为 child 附加到座位上。但是，我无法拖放和附加到这些动态创建的座位 div。有什么建议吗？
JSBin 提高可读性:http://jsbin.com/papoqih/edit?html,css,js,output
function renderSeats(num){
var diff = 1 / num;
var seats = '';
for( i=0; i<num; i++){
var rotate = (diff * 360) * i;
seats += '<div class="seat-wrap"\
style="transform:rotate('+rotate+'deg);">\
<div class="seat"></div>\
</div>'
}
document.querySelector('.seats').innerHTML = seats;
}
$("select[name=tableCap]").change(function() {
renderSeats($(this).val());
});
$(".nameContainer").draggable();
$(".seat").droppable({
drop: function(ev, ui)
{
$(ui.draggable).appendTo($(this))
}
});
$(function(){
renderSeats($("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>最佳答案
您不能包含来自 github 的脚本文件的原始版本，由于服务器发送的 MIME 类型不同，它不会被解析为 JS。
更改该文件的源代码 (jquery-ui-touch-punch) 似乎可以让您的演示正常运行:
http://jsbin.com/pucadabigo/edit?html,css,console,output
编辑:可放置的选择器也是错误的。它应该是 .seats，而不是 .seat。
编辑 2: 结果证明这不是拼写错误，而是缺少座位 div。添加了一些内容以及 css 修复(以在拖动后清除 .nameContainer 元素的绝对定位)。
关于javascript - 附加可拖动到动态创建的座位表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41948892/