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

Jquery-ui在drop上附加模板，并将附加模板child作为droppable（嵌套）

1 个答案: