可滚动区域间Div元素拖拽失败，求技术解决方案？

核心问题原因 #

拖拽元素默认在滚动容器（#example2-left）内部生成，当拖拽超出容器范围时，会被容器的overflow-y: scroll属性截断，同时容器的滚动事件也会干扰拖拽行为，导致拖拽操作不顺畅。

解决方案步骤 #

1. 调整Draggable配置，让拖拽元素脱离原容器 #

给.draggable添加appendTo: 'body'和zIndex属性，确保克隆的拖拽元素挂载到页面最上层，不受原滚动容器的限制：

$(".draggable").draggable({
    revert: "false",
    helper: "clone",
    appendTo: 'body', // 将克隆的拖拽元素挂载到body下，脱离原滚动容器
    zIndex: 9999, // 确保拖拽元素层级最高，避免被其他元素遮挡
    start: function(event, ui) {
        // 拖拽开始时给原元素添加半透明效果（可选，提升交互反馈）
        $(this).css('opacity', '0.5');
    },
    stop: function(event, ui) {
        // 拖拽结束恢复原元素透明度
        $(this).css('opacity', '1');
    }
});

2. 优化Droppable的克隆逻辑 #

避免克隆后的元素保留原拖拽事件绑定，移除相关类名防止重复触发：

$('.dropzones').droppable({
    accept: '.draggable', // 明确只接受指定类的拖拽元素
    hoverClass: 'dropzone-hover', // 可选，添加悬停时的样式反馈
    drop: function(event, ui) {
        // 克隆元素并移除jQuery UI自动添加的拖拽类
        var newClone = $(ui.helper).clone().removeClass('ui-draggable ui-draggable-dragging');
        $(this).after(newClone);
    }
});

3. 可选：禁用拖拽过程中的容器滚动 #

如果拖拽时滚动容器的自动滚动影响操作，可以在拖拽开始时临时禁用滚动，结束后恢复：

$(".draggable").draggable({
    // 其他配置...
    start: function(event, ui) {
        $('#example2-left, #example2-right').css('overflow-y', 'hidden');
        $(this).css('opacity', '0.5');
    },
    stop: function(event, ui) {
        $('#example2-left, #example2-right').css('overflow-y', 'scroll');
        $(this).css('opacity', '1');
    }
});

4. 可选：添加悬停样式提升交互体验 #

给目标放置区域添加悬停样式，让用户更清晰感知可放置状态：

.dropzone-hover {
    background-color: #e0f7fa !important;
    border-color: #00acc1 !important;
}

完整整合代码 #

$(function() {
    $(".draggable").draggable({
        revert: "false",
        helper: "clone",
        appendTo: 'body',
        zIndex: 9999,
        start: function(event, ui) {
            $('#example2-left, #example2-right').css('overflow-y', 'hidden');
            $(this).css('opacity', '0.5');
        },
        stop: function(event, ui) {
            $('#example2-left, #example2-right').css('overflow-y', 'scroll');
            $(this).css('opacity', '1');
        }
    });

    $('.dropzones').droppable({
        accept: '.draggable',
        hoverClass: 'dropzone-hover',
        drop: function(event, ui) {
            var newClone = $(ui.helper).clone().removeClass('ui-draggable ui-draggable-dragging');
            $(this).after(newClone);
        }
    });
});

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