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

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

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

选中添加的div可以拖动

2 个答案: