CODEWITHSUNDEEP
jquery-uijquery-ui-draggable
nifCody
nifCody

Reputation: 2444

Dynamically added element is fail to draggable

I have added a dynamic content using below snap

var obj = {"Test Tube": "test.png","Beater": "beat.png"};
    $.each( obj, function( key, value ) {
        $(".instruments").append('<div class="tile bg-gray">'
                                    +'<div class="tile-content image">'
                                        +'<img src="'+value+'">'
                                    +'</div>'
                                    +'<div class="brand">'
                                        +'<span class="label fg-white">'+key+'</span>'
                                    +'</div>'
                                    +'</div>');
    });

    $(".tile").click(function(){ 
        var imgSelected = $(this).find("img").attr("src");
        $(".working-area").append('<div id="draggable" class="ui-widget-content" style="border:solid 1px;"><img src="'+imgSelected+'" width="100px" height="100px" /></div>');      
    });

Now I need to make newly added #draggable div to be draggable element. for this purpose i have code like below

$(function() {
$( "#draggable" ).draggable();
});

But it works for static elements not work for dynamically added divs like id #draggable

I have link these external js and css

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

I don't no why this is wrong for dynamic divs

Upvotes: 1

Views: 941

Answers (1)

Runcorn
Runcorn

Reputation: 5224

The problem is that ,

$(function() {
     $( "#draggable" ).draggable();
});

is equivalent of $( document ).ready(). So, when this method is called.. only those elements present at that time will be initialized with draggable behavior.And other dynamic element will be be devoid of this initialization.

So, you have to re-initialize draggable when those dynamic elements are added ,

 $(".tile").click(function(){ 
            var imgSelected = $(this).find("img").attr("src");
            $(".working-area").append('<div id="draggable" class="ui-widget-content" style="border:solid 1px;"><img src="'+imgSelected+'" width="100px" height="100px" /></div>');   
            $( "#draggable" ).draggable();
        });

And, Also I suggest you to use class selector instead of id selector for initializing draggable.

Looking at this block of code, it seems the id parameter might be duplicate in DOM , which is not good practice. id are meant to be unique, and this will cause only one element to be draggable.

 $(".tile").click(function(){ 
        var imgSelected = $(this).find("img").attr("src");
        //FIXME : Chance of Duplicate id
        $(".working-area").append('<div id="draggable" class="ui-widget-content" style="border:solid 1px;"><img src="'+imgSelected+'" width="100px" height="100px" /></div>');      
    });

Upvotes: 3

Related Questions