jQuery-ui在放置時追加模板，並使追加的模板子級成為droppable（嵌套）

Question

如何在放置模板時附加模板以及如何將模板的子對象作為可放置（嵌套）對象放置。

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