jquery-ui - Jquery-ui 在放置时附加模板并将附加的模板作为可放置（嵌套）的子模板

Question

如何在将模板的子级拖放为可拖放（嵌套）时附加模板。

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

需要在放置时将上面的代码附加到我下面的小提琴中，并且 box2 是可放置的。

提琴手

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