Jquery-ui append template on drop and make appended templates child as droppable(nested)

Question

How to Append template while dropping and dropped template's child as droppable(nested).

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

Need to append above code to my below fiddle while dropping and box2 is droppable.

Jsfiddle

Answer 1

You have some syntax issues in your $template, it should be something like:

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

The use of " breaks out of your string and you should use '.

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