selected added div be draggable

Question

I want my added div be draggable.
I can do it by adding $("div[id^=new-text]:last").draggable();
But this is not work.

My complete example link

This is the code:

var count=0;
$(function() {
    $(".add-new").click(function() {
        $('.image').append("<div id='new-text_"+count+"' contenteditable>Edit me</div>");
        count++;
    });

    $('#writable').keydown(function() {
        var writable_value = $('#writable').val();
        $("div[id^=new-text]:last").text(writable_value);
    });

    /*change font family*/
    $("#fs").change(function() {
        //alert($(this).val());
        $("div[id^=new-text]:last").css("font-family", $(this).val());
    });

    $("#fc").change(function() {
        //alert($(this).val());
        $("div[id^=new-text]:last").css("color", $(this).val());
    });

    /* change font size */
    $("#size").change(function() {
        $("div[id^=new-text]:last").css("font-size", $(this).val() + "px");
    });

    $("div[id^=new-text]:last").draggable();
})

Answer 1

If you want any of the added text to be draggable. You will be looking for the following:

$("div[id^=new-text]").draggable();

Instead of this what you have currently:

$("div[id^=new-text]:last").draggable();

You was only picking the last new-text element, so you need to select all the elements with the id containing new-text.

Answer 2

If I add draggable it is work but is problem with editing of selected div. jsfiddle

        $(".add-new").click(function() {
        $('.image').append("<div id='new-text_"+count+"' contenteditable>Edit me</div>");
        count++;
    });