如何使动态创建的元素可拖动()?

Question

我正在尝试弄清楚如何使动态创建的div可拖动，因此我创建了这个非常简单的东西来帮助我。我知道我必须使用on()事件与非动态处理程序。通过在链接的JSfiddle中让body元素处理克隆事件，我已成功地使动态创建的div可克隆，但它们无法拖动。我做错了什么？

提前感谢您的帮助！

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink'></div>"))
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue'></div>"))
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral'></div>"))
    });
    $(".draggable").draggable();
});

- thatpaintingelephant

---

你没有在元素中添加'class draggable'类。 - Jhankar Mahbub

哇，好发现。我无法相信我错过了那个。我感觉很傻！ - thatpaintingelephant

Answer 1

在创建元素时，将"class"或"id"属性设置为"draggable"，如果没有设置"class"属性，则代码将无法正常工作。

$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable() 

- Jhankar Mahbub

---

当id是多个时，该怎么办？ - Dhaval Marthak

将类放入元素中以运行 - Jhankar Mahbub

$('.container').append($("<div class='bl pink draggable'></div>").draggable()); - Philipp Molitor

我已经使用了after函数：$("#" + appendID).after(NewDropPanelv).droppable(); - Sumit patel

Answer 2

我会像这样做。

在将元素添加到容器后，我会调用draggable方法，就像这样：

 $("<div class='bl pink'></div>").appendTo('.container').draggable();

- nicosantangelo

Answer 3

我也遇到了同样的问题。接受的答案肯定有效，但我正在寻找一个更简洁、更集中的解决方案。我不想在我的脚本插入新元素的每个地方都明确调用 .draggable()。

我最终选择监听父元素上的 DOM 插入事件，然后在插入的子元素上应用 .draggable()。例如：

$("#Parent").on("DOMNodeInserted", ".ChildClass", function() { $(this).draggable(); });

这里有一个演示的小提琴，请查看：http://jsfiddle.net/9hL7u95L/。

- Andrew Tevington

---

请注意，DOMNodeInserted和其他变动事件已被弃用："请注意此功能随时可能停止工作。" - moi

Answer 4

使用

$("<div class='bl blue'></div>").draggable().appendTo($('.container'));

DEMO

$(document).ready(function () {

    $('.container').on('click', '.pink', function () {
        $("<div class='bl blue'></div>").draggable().appendTo($('.container'));
    });

    $('.container').on('click', '.blue', function () {
        $("<div class='bl blue'></div>").draggable().appendTo($('.container'));
    });
    $('.container').on('click', '.coral', function () {
        $("<div class='bl coral'></div>").draggable().appendTo($('.container'));
    });

    $(".draggable").draggable();
});

.appendTo

- Tushar Gupta - curioustushar

---

你不需要传递一个 jQuery 元素到 appendTo 函数中。 - nicosantangelo

我并没有说它不起作用。只是没有必要/是错误的，你是在没有需要的情况下创建一个实例。 - nicosantangelo

Answer 5

将可拖动的class添加到动态添加的元素中。

$(document).ready(function () {
    $("body").on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink draggable'></div>"));
        $(".draggable").draggable();
    });
    $("body").on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue draggable'></div>"));
        $(".draggable").draggable();
    });
    $("body").on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral draggable'></div>"));
        $(".draggable").draggable();
    });

});

- Thomas

---

和@Harry的答案一样，如果您想要每个元素具有特定的行为，这可能会成为一个问题。 - nicosantangelo

然后为每个使用特定的ID。$('.container').append($("<div class='bl coral' id="someid"></div>")); $("#someid").draggable(); - Thomas

或者，您可以检查我的答案。 - nicosantangelo

我使用了以下代码：$("#" + appendID).after(NewDropPanelv).droppable(); 但是我的 div 不可拖动。 - Sumit patel

Answer 6

您可以按照以下方式操作：

$(document).ready(function () {

    $('.container').on('click', '.pink', function () {
        $('.container').append($("<div class='bl pink draggable'></div>"));
        $('.draggable').draggable();
    });

    $('.container').on('click', '.blue', function () {
        $('.container').append($("<div class='bl blue draggable'></div>"));
        $('.draggable').draggable();
    });
    $('.container').on('click', '.coral', function () {
        $('.container').append($("<div class='bl coral draggable'></div>"));
        $('.draggable').draggable();
    });
    $('.draggable').draggable();

});

Working Demo

- Harry

---

通过这种方式，您正在对已经可拖动的元素调用 draggable()。如果您希望每个元素具有特定的行为，则可能会出现问题。 - nicosantangelo

@NicoSantangelo：抱歉，我不明白你所说的“每个元素的特定行为”是什么意思。要求只是使动态元素也可以被拖动，对吧？ - Harry

抱歉如果我表达不清楚。我的意思是你可能想使用不同的选项调用 draggable，而使用 $('.draggable').draggable([options]); 会在每个元素上执行，而不是新的元素上执行。这并没有错，我只是指出来而已。 - nicosantangelo

@NicoSantangelo：不用担心，改进/指出问题并不是错的 :) 我现在明白你的意思了。在这种情况下，我们可以给div附加一个id或为每个独特的行为设置一个特定的class，并根据需要修改.draggable调用。 - Harry

@NicoSantangelo 顺便说一下，你的示例和其他人的都很棒。我看到我们许多人在更多或更少相同的时间内发布了可行的选项。不过，OP只能接受一个 :) - Harry

Answer 7

我已经为您的示例代码添加了一些内容，希望它能帮到您：http://jsfiddle.net/m3BXZ/8/ 基本上，我创建了一个名为“startDrag”的函数，使新的块可拖动：

function startDrag(){
    $(".bl").draggable();
}

有很多方法可以做到这一点，只要找到适合您的解决方案即可。

- azzy81

Answer 8

试试这个（示例）：

       $('.btn-hotspot-add').click(function(){
            //Create element and append draggable action
            var element = $('<span class="hotspot"></span>').draggable({
                'containment': "parent",
                'stop': function(elm){
                    //Sample stop action
                    var parentWith = elm.target.offsetParent.offsetWidth;
                    var parentHeight = elm.target.offsetParent.offsetHeight;
                    var x = elm.target.offsetLeft;
                    var y = elm.target.offsetTop;
                    console.log(parentWith+'x'+parentHeight+' - '+x+'x'+y );

                }
            });

            //Append draggable element to parent container
            $('#parent').append(element);
        });

- Piotr Nowak