2
空白の間隔でテーブルの周りに座席を生成する関数を作成しました。問題は、リストから名前をドラッグして、子として座席に追加することです。しかし、私はこれらの動的に作成されたシートdivにドラッグ、ドロップ、追加することはできません。提案？読みやすくするため動的に作成された座席図にdraggableを付け加えよう
JSBin：あなたはgithubのからスクリプトファイルの生のバージョンを含めることはできません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;
\t 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>
ありがとうございますが、それでもドラッグされた名前のdivは、ドロップ可能なシートdivに追加されません –
私の悪いです。私は座席の要素のあなたのセレクタが間違っていることに気付きました。 '.seat'ではなく' .seats'でなければなりません。私もこれを修正するjsbinを更新しました。 – dommmm
私はよく説明していたはずです、残念です。私は実際にそれが落とされる$（ "座"）に追加する必要があります。後で読み込むためにhtmlをデータベースに保存しています。私は親子階層を通して名前にアクセスしたいと思っています。 –