동적으로 생성 된 좌석 차트에 draggable 추가

즉석에서 테이블 주위에 자리를 생성하는 함수를 만들었습니다. 문제는 목록에서 이름을 드래그하여 어린이로 자리에 추가하게하려는 것입니다. 그러나 동적으로 생성 된 시트 div에 끌어다 놓기 및 추가 할 수는 없습니다. 제안? 가독성을위한동적으로 생성 된 좌석 차트에 draggable 추가

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; 
 
    \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>

출처

2017-01-31 Anonymous

당신은 GitHub의에서 스크립트 파일의 원시 버전을 포함 할 수 없습니다, 그것은 때문에 다른 MIME 타입에 JS로 해석되지 않습니다 서버가 보낸

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

편집 : 드롭 가능한 선택이 잘못뿐만 아니라입니다 파일 (jquery-ui-touch-punch)의 소스를 변경

는

당신의 데모 작업을 얻을 것으로 보인다. .seat이 아니라 .seats이어야합니다.

편집 2 :은 오타가 아니라 시트 div가 누락되었습니다. 드래그 후 .nameContainer 요소의 절대 위치를 지우려면 CSS 수정과 함께 다시 추가하십시오.

출처

2017-01-31 03:01:56 dommmm

그러나 감사합니다. 그래도 여전히 드래그 한 이름 div가 삭제 가능한 시트 div –

에 추가되지 않습니다. 좌석 요소에 대한 선택자가 잘못되었음을 깨달았습니다. '.seat'이 아니라'.seats'이어야합니다. 이 문제를 해결하기 위해 jsbin을 업데이트했습니다. – dommmm

나는 더 잘 설명해야 했어, 미안해. 실제로 $ $ (". seat")에 추가해야합니다. 나중에로드 할 html 데이터베이스에 저장하고 부모 - 자식 계층 구조를 통해 이름에 액세스하려고합니다. –

동적으로 생성 된 좌석 차트에 draggable 추가

답변

관련 문제