文章/答案/技术大牛

发布

社区首页 >问答首页 >附加可拖动到动态创建的座位图

问附加可拖动到动态创建的座位图
EN

Stack Overflow用户

提问于 2017-01-31 02:46:51

回答 1查看 977关注 0票数 2

我创建了一个功能，在一张桌子周围产生一个空间均匀的座位。问题是，我想把名字从名单上拖出来，然后在孩子们的时候把它们附加到座位上。然而，我不能拖放和附加到这些动态创建的座椅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>

jquery-ui

javascript

jquery

html

css

回答 1

Stack Overflow用户

发布于 2017-01-31 03:01:56

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

更改该文件的源代码(jquery-ui-touch-punch)似乎可以让您的演示正常工作：

http://jsbin.com/pucadabigo/edit?html,css,console,output

编辑：这个可下垂的选择器也错了。应该是.seats，而不是.seat。

编辑2:发现这不是一个错误，而是缺了一个div。随css修复一起添加一些返回(以清除.nameContainer元素在拖动后的绝对位置)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41948892

复制

相似问题

问附加可拖动到动态创建的座位图
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问附加可拖动到动态创建的座位图EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问附加可拖动到动态创建的座位图
EN