jQuery Draggable/Droppable与CSS Overflow样式冲突问题求助：拖拽元素在滚动容器边缘消失

我刚好遇到过类似的场景，这个问题其实是滚动容器的overflow属性在搞鬼——当你把元素拖出设置了overflow-y: scroll的容器时，容器会自动裁剪超出边界的子元素，导致拖拽元素看起来“消失”了。

问题根源 #

默认情况下，jQuery UI的Draggable组件会让拖拽元素保持在原父容器的DOM层级下，而你的.drag-area设置了overflow-y: scroll，这个属性会强制裁剪所有超出容器可视区域的子元素，所以当元素拖到容器边缘外时，就被裁切掉了。

可行的解决方案 #

核心思路是让拖拽元素在拖拽过程中脱离原滚动容器的约束，具体可以通过两种方式实现：

方式1：拖拽时将元素临时移到body下 #

修改你的JavaScript代码，在拖拽开始时把元素移到body（这个元素没有overflow限制），拖拽结束后再处理归属：

$(".box").draggable({
  scope: 'demoBox',
  revertDuration: 100,
  start: function(event, ui) {
    // 重置状态
    $(".box").draggable("option", "revert", true);
    $('.result').html('-');
    
    // 存储原父容器，用于拖拽失败时恢复
    $(this).data('originalParent', $(this).parent());
    
    // 把元素移到body，避免被原容器裁剪
    $(this).appendTo('body').css({
      position: 'absolute',
      top: ui.position.top + $(window).scrollTop(),
      left: ui.position.left + $(window).scrollLeft()
    });
  },
  stop: function(event, ui) {
    // 如果拖拽未成功触发drop，把元素放回原容器
    if ($(this).draggable("option", "revert")) {
      $(this).appendTo($(this).data('originalParent')).css({top: '', left: ''});
    }
  }
});

$(".drag-area").droppable({
  scope: 'demoBox',
  drop: function(event, ui) {
    var area = $(this).find(".area").html();
    var box = $(ui.draggable).html();
    $(".box").draggable("option", "revert", false);
    
    $('.result').html("[Action] <b>" + box + "</b>" + " dropped on " + "<b>" + area + "</b>");
    
    // 将元素移到目标容器，重置内联样式
    $(ui.draggable).detach().css({top: '', left: ''}).appendTo(this);
  }
});

方式2：使用克隆的拖拽助手（Helper） #

如果你不想移动原元素，而是拖拽一个克隆副本，可以用helper: 'clone'配置，克隆的元素默认会被添加到body下，自然不会被原容器裁剪：

$(".box").draggable({
  scope: 'demoBox',
  revertDuration: 100,
  helper: 'clone', // 启用克隆助手
  start: function(event, ui) {
    $(".box").draggable("option", "revert", true);
    $('.result').html('-');
    // 给克隆元素加样式，和原元素一致
    ui.helper.css({background: '#673AB7', color: '#fff', border: '2px solid #512DA8'});
  }
});

$(".drag-area").droppable({
  scope: 'demoBox',
  drop: function(event, ui) {
    var area = $(this).find(".area").html();
    var box = ui.draggable.html();
    $(".box").draggable("option", "revert", false);
    
    $('.result').html("[Action] <b>" + box + "</b>" + " dropped on " + "<b>" + area + "</b>");
    
    // 把原元素移到目标容器，克隆助手会自动销毁
    ui.draggable.detach().css({top: 0, left: 0}).appendTo(this);
  }
});

关于你的实现思路 #

你的核心方案（滚动容器间拖拽元素）本身没有固有缺陷，只是没考虑到overflow对拖拽元素的裁剪影响。只要调整拖拽过程中元素的DOM层级，就能完美解决这个问题。

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