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.

jsfiddle

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

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -