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

how do i make dynamically created elements draggable()?

本文关键字：拖动 元素 何使 动态 创建      更新时间：2023-09-26

我正在尝试弄清楚如何使动态创建的div可拖动，所以我创建了这个非常简单的东西来帮助我。我知道我必须将 on（） 事件与非动态处理程序一起使用。通过让 body 元素处理链接的 JSfiddle 中的克隆事件，我成功地使动态创建的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();
});

在创建时将类"可拖动"或id放在元素中。（你不是在放类），然后代码应该可以工作

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

我会做这样的事情

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

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

我遇到了同样的问题。公认的答案当然有效，但我正在寻找一个更干净、更集中的解决方案。我不想在我的脚本插入新元素的每个地方显式调用 .draggable（）。

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

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

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

使用 

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

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

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

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

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

工作演示

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

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

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

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

试试这个（示例）：

       $('.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);
        });
相关文章：