选定添加的 div 可拖动答案

【问题标题】：selected added div be draggable选定添加的 div 可拖动
【发布时间】：2015-10-15 11:31:14
【问题描述】：

我希望我添加的 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();
})

【问题讨论】：

我已经用该评论编辑了您的问题 :)

标签： jquery jquery-draggable

【解决方案1】：

如果您希望任何添加的文本可拖动。您将寻找以下内容：

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

你现在拥有的不是这个：

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

您只选择了最后一个 new-text 元素，因此您需要选择 id 包含 new-text 的所有元素。

【讨论】：

【解决方案2】：

如果我添加可拖动的，它可以工作，但编辑选定的 div 有问题。 jsfiddle

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

【讨论】：