Jquery ui Jquery ui在拖放时追加模板，并将追加的模板作为可拖放的子模板（嵌套）

如何在拖放时追加模板，并将模板的子项作为可拖放（嵌套）拖放

$template=$（“box1box2”）；

需要在放下时将上面的代码附加到我下面的小提琴上，而box2是可放下的

---

您的

$template

中存在一些语法问题，应该是这样的：

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

---

欢迎来到堆栈溢出。看起来你解决了之前的问题，类似的。我看不出你的小提琴在哪里使用了

$template

。请澄清你迄今为止所做的尝试。如何使child2也可拖放？我需要父级和子级在特定目标上拖放时具有相同的内容（嵌套n次）？

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

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