已选择添加 div 可拖动

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();

您只选择了最后一个新文本元素，因此您需要 select 所有 id 包含新文本的元素。

Answer 2

如果我添加可拖动它是可行的，但编辑所选 div 时出现问题。 jsfiddle

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

已选择添加 div 可拖动

selected added div be draggable

jquery

jquery-draggable