Bootstrap Snippet drag and drop with clone using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
#dropHere {
    width:400px;
    height: 400px;
    border: 1px  dotted black;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$( 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){
        }
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"drag and drop with clone"
Bootstrap 3.3.0 Snippet by daman

Related: See More

Questions / Comments:

"drag and drop with clone" Bootstrap 3.3.0 Snippet by daman

Related: See More

Questions / Comments:

"drag and drop with clone"
Bootstrap 3.3.0 Snippet by daman