Javascript jQuery可在溢出容器中拖动

我有一个小的HTML页面，您可以将列表项从包含大量内容的div容器中拖出，因此它被设置为

overflow:scroll

（用于使其可滚动）

如文档中所述，如果将列表项从可滚动容器中拖出，则应将其设置为

scroll:false

。只有使用

helper:clone

才能将列表项拖出容器。但这不是我想要的

appendTo:body

似乎只与

helper:clone

（请参见此处：）一起工作，由于视觉反馈的原因，我无法使用它（

li

项目如果添加到“早餐”中，则会在列表中消失）

这是我的jQuery代码：

$('ul li').draggable({
  revert: 'invalid',
  zIndex: '10000',
  appendTo: 'body',
  scroll: false,
  start: function(event,ui) {},
  stop: function (event,ui) {}
});

它可以在计算机上进行测试。（代码：）

---

如何在将li容器从溢出容器中拖出时使其可见？

您的问题可能是由内联样式位置：相对引起的。应将拖动列表项的位置设置为绝对，而不将其拖动为静态。 试试这个：

#right ul > li {
  position: static !important;
}

#right ul > li.ui-draggable-dragging {
  position: absolute !important;
}

---

我还找到了另一个解决方案，它使用

helper:clone

并切换拖动项目的可见性。看这里