Jquery-ui append template on drop and make appended templates child as droppable(nested) -
how append template while dropping , dropped template's child droppable(nested).
$template=$("<div class="static">box1</div><div class="droppable-box-nested">box2</div>");
need append above code below fiddle while dropping , box2 droppable.
you have syntax issues in $template
, should like:
var $template = $("<div class='static'>box 1</div><div class='droppable-box-nested'>box 2</div>");
the use of "
breaks out of string , 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: '' }) } }); });
Comments
Post a Comment