jQuery 我如何使动态创建的元素可拖动（）？

how do i make dynamically created elements draggable()?

提问by thatpaintingelephant

I'm trying to figure out how to make dynamically created divs draggable, so I've created this very simple thingto help me. I understand that I have to use the on() event with a non-dynamic handler. By having the body element handle the cloning event in the linked JSfiddle, I've succeeded in making the dynamically created divs clonable, but they are not draggable. What am I doing wrong?

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

Thank you in advance for the help!

预先感谢您的帮助！

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

回答by Jhankar Mahbub

at time of creation put class "draggable" or id in the element. (you are not putting class) and then code should work

在创建时将类“draggable”或 id 放在元素中。（你不是在上课）然后代码应该可以工作

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

回答by nicosantangelo

I would do something like this

我会做一些像这样

I'm calling the draggablemethod after I add the elements to the container, like this:

我在draggable将元素添加到容器后调用该方法，如下所示：

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

回答by Andrew Tevington

I had the same problem. The accepted answer certainly works, but I was looking for a cleaner, more centralized solution. I didn't want to explicitly call .draggable() every place my script inserted new elements.

我有同样的问题。接受的答案当然有效，但我正在寻找一个更清洁、更集中的解决方案。我不想在我的脚本插入新元素的每个地方显式调用 .draggable()。

What I settled on was listening for DOM inserts on the parent element and then applying .draggable() on the inserted children. For example:

我决定在父元素上监听 DOM 插入，然后在插入的子元素上应用 .draggable()。例如：

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

Check out this fiddle for a demo: http://jsfiddle.net/9hL7u95L/

查看这个小提琴的演示：http: //jsfiddle.net/9hL7u95L/

回答by Tushar Gupta - curioustushar

use

用

$("<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

.appendTo

回答by Thomas

Add draggable class to the dynamically added elements.

为动态添加的元素添加可拖动类。

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

});

回答by Harry

You can do it the below way:

您可以通过以下方式进行操作：

$(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

工作演示

回答by azzy81

Ive added some bits to your fiddle hopefully it will help: http://jsfiddle.net/m3BXZ/8/

我已经在你的小提琴中添加了一些内容，希望它会有所帮助：http: //jsfiddle.net/m3BXZ/8/

Basically Ive made a function called startDrag that makes the new blocks draggable:

基本上我做了一个叫做 startDrag 的函数，它使新块可以拖动：

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

Theres many ways to do this its just finding which solution suits you best.

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

回答by Piotr Nowak

Try this (example):

试试这个（示例）：

       $('.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);
        });