Jquery-ui在drop上添加模板，並使添加的模板作爲droppable（嵌套）

Question

如何在拖放模板的子項時添加模板並將其放置爲droppable（嵌套）。

$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/

的JavaScript

$(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: '' 
     }) 
    } 
    }); 
});