页面加载后动态新增的Draggable元素无法拖拽问题求助

动态添加的元素无法拖拽，核心原因是jQuery UI的draggable插件只会对初始化时已存在的元素绑定拖拽事件，你动态创建的新元素没有执行draggable()初始化，自然无法拖拽。

具体解决步骤 #

1. 把拖拽初始化逻辑抽成可复用的函数
   这样不管是页面加载时的元素还是动态添加的元素，都能统一调用初始化：

// 封装初始化拖拽的函数，配置和你原来的保持一致
function initDraggableElements($elements) {
  $elements.draggable({
    // 这里填写你原来设置的draggable配置，比如：
    // containment: ".container",
    // cursor: "move"
  });
}

2. 页面加载完成后初始化原有元素
   在你创建完初始工具栏元素的代码之后，调用上面的函数：

// 你的初始元素创建代码执行完毕后
initDraggableElements($('.draggable'));

3. 动态添加元素后立刻初始化新元素
   修改你mousedown事件里的代码，在插入新元素后，对它执行拖拽初始化：

$(`.toolbar-item`).on("mousedown", function(e) {
    if ($(this).hasClass("toolbar-item-out")) return; 
    
    let id = $(this).attr('id');
    let item_id = id.split('_')[0].split('i')[1];
    let item_num = id.split('_')[1].split('num')[1];
    let htmlString = `
        <div class="toolbar-item draggable ui-widget-content" id="i${items[item_id].item_id}_num${parseInt(item_num) + 1}"> ${items[item_id].item_name} </div>
    `;

    // 插入新元素并保存引用
    let $newItem = $(htmlString).insertBefore($(`#${id}`));
    // 初始化新元素的拖拽功能
    initDraggableElements($newItem);

    $(this).prependTo('.area').attr('style', 'position: fixed !important; color: red;').offset({ top: e.pageY, left: e.pageX }).addClass("toolbar-item-out").addClass('z-index-10')
        .on( "mouseup", function() {
            $(this).removeClass('z-index-10');
        });
});

注意：这里把item_num + 1改成了parseInt(item_num) + 1，避免字符串拼接导致的ID错误（比如原num0变成num01而不是num1）。

额外优化建议 #

你初始创建元素时用innerHTML +=的方式效率较低，且原代码里的换行逻辑有运算顺序错误，推荐修改为：

let toolbar_items = document.getElementById('toolbar-items');
for (let i = 0; i < items.length; i++) {
    let $item = $(`
        <div class="toolbar-item draggable ui-widget-content" id="i${items[i].item_id}_num0"> ${items[i].item_name} </div>
    `);
    $(toolbar_items).append($item);
    if ((i + 1) % 2 == 0) { // 加括号保证运算顺序正确，实现每两个元素换行
        $(toolbar_items).append('<br>');
    }
};
// 初始化拖拽
initDraggableElements($('.draggable'));

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