выбранный добавленный div be draggable

Question

Я хочу, чтобы мой добавленный div был перетаскиваем.
Я могу это сделать, добавив $("div[id^=new-text]:last").draggable();
Но это не работа.

Мой полный пример link

Это код:

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

Если вы хотите какой-либо из добавленного текста будет перетаскивать. Вы будете искать в следующем:

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

Вместо этого то, что у вас есть в данный момент:

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

Вы лишь собирание последний нового текстового элемента, так что вам нужно, чтобы выбрать все элементы с id, содержащий новый текст.

Answer 2

Если я добавляю draggable, это работа, но проблема с редактированием выбранного div. jsfiddle

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