Question

我创建了一个函数，可以动态地在桌子周围生成均匀间隔的座位。问题是我想从列表中拖动名称并将它们作为子项附加到席位。但是，我无法拖放，附加到这些动态创建的座位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>

Answer 1

您不能从github包含脚本文件的原始版本，由于服务器发送的MIME类型不同，它不会解析为JS。

更改该文件的来源（jquery-ui-touch-punch）似乎让您的演示工作正常：

Media Session callbacks documentation

编辑： droppable选择器也是错误的。它应该是.seats，而不是.seat。

编辑2：结果证明它不是一个错字，但缺少座位div。添加了一些内容以及css修复（以便在拖动后清除.nameContainer元素的绝对定位。）

追加可拖动到动态创建的座位表

1 个答案: