如何为DOM加载元素添加jQuery Draggable功能并解决新旧元素拖拽冲突

核心原因为同一droppable元素重复初始化导致配置被覆盖：

• jQuery UI的droppable组件对同一个DOM元素多次调用droppable()方法时，后传入的配置会完全覆盖之前的配置，包括accept接受的元素规则、drop回调函数等
• dragger()中给#work_area_div_sub设置的accept: ".draggable"和对应的克隆逻辑，会被后续dragger_idle()中设置的accept: ".draggable2"和空drop回调完全覆盖，因此拖拽.draggable元素时完全不会触发drop事件

不要重复初始化droppable，单次初始化时配置同时支持两类可拖拽元素，在drop回调中区分处理逻辑即可：

1. 合并droppable的accept参数，同时接受.draggable和.draggable2两类元素
2. 删除单独的dragger_idle()函数，所有拖拽相关的初始化逻辑统一放在dragger()中实现
3. 优化resizable绑定逻辑，只给新生成的元素绑定resizable，避免重复绑定已有的draggable2元素

function dragger() {
    // 初始化外部可拖拽新增元素
    $(".draggable").draggable({
        revert: "invalid",
        containment: "#work_area_div_sub",
        helper: "clone",
        cursor: "move"
    });

    // 初始化预加载/已存在的工作区可拖拽元素
    $(".draggable2").draggable({
        revert: "invalid",
        containment: "#work_area_div_sub",
        cursor: "move"
    }).resizable({
        handles: "n, e, s, w, se, ne, sw, nw",
        aspectRatio: true
    });

    // 仅初始化一次droppable，同时接受两类元素
    $("#work_area_div_sub").droppable({
        accept: ".draggable, .draggable2",
        containment: "#work_area_div_sub",
        drop: function( event, ui ) {
            const draggedEl = ui.draggable;
            // 仅当拖拽的是外部的.draggable元素时执行克隆逻辑
            if (draggedEl.hasClass("draggable")) {
                const newEl = draggedEl.clone()
                    .appendTo($(this))
                    .removeClass("draggable")
                    .addClass("draggable2")
                    .draggable({
                        revert: "invalid",
                        containment: "#work_area_div_sub",
                        cursor: "move"
                    })
                    .resizable({
                        handles: "n, e, s, w, se, ne, sw, nw",
                        aspectRatio: true
                    });
            }
            // 若需要处理draggable2元素的drop逻辑，可在此处补充
        }
    });
} 

$(document).ready(function() {
    dragger();
});

内容的提问来源于stack exchange，提问作者Ambiguous Turtle