Jquery-ui 드롭에 템플리트를 추가하고 추가 된 템플리트를 자식을 dropable (중첩 됨)로 만듭니다.

Question

템플릿의 하위를 drop (중첩)으로 놓거나 떨어 뜨리는 동안 템플리트를 추가하는 방법.

$template=$("<div class="static">box1</div><div class="droppable-box-nested">box2</div>"); 

위의 코드를 삭제하는 동안 아래 코드에 추가해야하며 box2는 삭제 가능해야합니다.

Jsfiddle

Answer 1

당신은 당신의 $template의 일부 구문 문제가, 그것과 같이해야한다 :

var $template = $("<div class='static'>Box 1</div><div class='droppable-box-nested'>Box 2</div>"); 

당신의 문자열 중 " 휴식의 사용을 당신은 '를 사용해야합니다.

근무 예 : https://jsfiddle.net/Twisty/vwyd9cz1/1/

자바 스크립트 스택 오버플로

$(function() { 

    var $template = $("<div class='static'>Box 1</div><div class='droppable-box-nested'>Box 2</div>"); 

    $('.dragItem').draggable({ 
    helper: 'clone', 
    connectToSortable: "#column2,#column2 div" 
    }); 

    $('.dragItem').sortable({ 
    containment: "parent" 
    }); 

    $('#column2').sortable({ 
    placeholder: "highlight" 
    }); 

    $('#column2').droppable({ 
    accept: '.dragItem', 
    drop: function(event, ui) { 
     var draggable = ui.draggable; 

     var droppable = $(this); 
     var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); 
     drag.appendTo(column2); 
     $template.insertAfter(drag); 
     drag.sortable({ 
     placeholder: "highlight" 
     }); 
     drag.droppable({ 
     accept: ".dragItem", 
     drop: function(event, ui) { 
      var draggable = ui.draggable; 
      var droppable = $(this); 
      var drag = $('#column2').has(ui.draggable).length ? draggable : draggable.clone().draggable({}); 
     } 
     }) 
     drag.css({ 
     width: '', 
     height: '' 
     }) 
    } 
    }); 
});