<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h3>Counts<span id="count" class="badge">counts here</span></h3> <div class="dragImg"><img width="80" src="http://placehold.it/80x80"><span></span></div> <div id="dropHere"></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

#dropHere { width:400px; height: 400px; border: 1px dotted black; }

$( document ).ready(function() { $(function(){ //Make every clone image unique. var counts = [0]; $(".dragImg").draggable({ helper: "clone", //Create counter start: function() { counts[0]++; } }); $("#dropHere").droppable({ drop: function(e, ui){ $(this).append($(ui.helper).clone()); //Pointing to the dragImg class in dropHere and add new class. $("#dropHere .dragImg").addClass("item-"+counts[0]).attr('id', "item-"+counts[0]).append("item-"+counts[0]); // ui.helper.attr('id', "item-"+counts[0]); // alert("count",counts[0]); document.getElementById('count').innerHTML = counts[0]; //Remove the current class (ui-draggable and dragImg) $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging"); $(".item-"+counts[0]).dblclick(function() { $(this).remove(); }); //make the div draggable --- Not working??? make_draggable($(".item-1")); } }); var zIndex = 0; function make_draggable(elements) { elements.draggable({ containment:'parent', start:function(e,ui){ ui.helper.css('z-index',++zIndex); }, stop:function(e,ui){ } }); } }); });