16

I'm trying to figure out how to make dynamically created divs draggable, so I've created this very simple thing to 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?

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

8 回答 8

19

在创建时将类“可拖动”或 id 放入元素中。（你没有上课）然后代码应该可以工作

$('.container').append($("<div class='bl pink draggable'></div>"));
$('.draggable').draggable()
于 2013-09-13T14:56:42.303 回答
10

我会做这样的事情

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

 $("<div class='bl pink'></div>").appendTo('.container').draggable();
于 2013-09-13T15:00:27.633 回答
5

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

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

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

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

于 2015-08-25T23:02:02.903 回答
3

利用

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

演示

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

于 2013-09-13T15:00:38.880 回答
3

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

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

});
于 2013-09-13T15:00:46.270 回答
3

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

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

});

工作演示

于 2013-09-13T15:01:00.450 回答
3

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

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

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

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

于 2013-09-13T15:01:19.703 回答
0

试试这个（例子）：

       $('.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);
        });
于 2019-02-19T08:41:34.023 回答