JQuery拖拽克隆元素切换标签消失及元素迁移需求

我来帮你拆解下问题根源，然后一步步给出可行的解决方案：

问题核心原因 #

你遇到的克隆元素消失问题，本质是克隆的图片还留在原来的标签页容器（.tabcontent）里。当你切换标签页时，原标签页的.tabcontent会被设置为display: none，导致里面的克隆元素也跟着被隐藏了。你之前尝试的detach().appendTo()没生效，是因为拖拽事件的处理时机和逻辑不对，没把克隆体放到独立于标签页的目标容器中。

具体解决方案 #

1. 修复拖拽逻辑，把克隆体直接放到目标容器

原来的拖拽代码在drag和dragstop事件里重复添加克隆元素，且没有将它们转移到#dm-montagem。我们需要调整拖拽的stop事件，直接把克隆体附加到目标容器，而非原图片所在的标签页内：

jQuery(document).ready(function($) {
    // 仅给标签页内的服饰图片添加拖拽类（避免目标容器里的克隆图重复绑定）
    $(".tabcontent img").addClass("draggable");

    // 初始化拖拽功能
    $(".draggable").draggable({
        helper: 'clone',
        cursor: 'move',
        stack: "img",
        containment: "document" // 可选：限制拖拽范围在页面内，提升体验
    }).on('dragstop', function(event, ui) {
        // 克隆拖拽时的临时辅助元素
        var clonedOutfit = $(ui.helper).clone();
        // 给克隆体添加可删除、可拖拽的属性
        clonedOutfit.addClass("removable").draggable({
            cursor: 'move',
            stack: "img"
        });
        // 关键：把克隆体放到独立的#dm-montagem容器，而非原标签页
        clonedOutfit.appendTo('#dm-montagem');
    });

    // 禁用静态元素的拖拽
    $(".static").draggable("disable");

    // 垃圾桶删除功能
    $('#trash').droppable({
        accept: ".removable",
        drop: function(event, ui) {
            $(ui.draggable).remove();
        }
    });
});

2. 确保目标容器独立于标签页

检查你的HTML结构，确认#dm-montagem不在任何.tabcontent容器内部，它应该是和标签页容器同级的独立元素。如果它现在嵌套在某个标签页里，一定要把它移出来，这样标签页切换时才不会影响它的显示状态。

3. （可选）简化标签页代码

你当前的标签页代码用原生JS实现没问题，也可以用jQuery简化成更简洁的版本：

function openCategoria(evt, categName) {
    // 隐藏所有标签内容
    $(".tabcontent").hide();
    // 移除所有标签按钮的active类
    $(".tablinks").removeClass("active");
    // 显示当前标签内容，给对应按钮添加active类
    $("#" + categName).show();
    $(evt.currentTarget).addClass("active");
}

为什么之前的detach没生效？ #

你尝试的$(ui.helper).detach().appendTo('#dm-montagem')无效，是因为ui.helper是拖拽过程中的临时元素，在dragstop事件结束后会被jQuery UI自动移除，直接操作它不会保留克隆体。正确的做法是先克隆ui.helper，再把克隆体放到目标容器中。

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