javascript - 溢出容器中的 jQuery 可拖动

Question

我有一个小的 HTML 页面，您可以在其中将列表项拖出一个包含很多内容的 div 容器，因此将其设置为 overflow:scroll(使其可滚动) .

如文档中所述，如果我将列表项拖出可滚动容器，我应该将列表项设置为 scroll: false。只有使用 helper: clone 才能将列表项拖出容器。但这不是我想要的。 appendTo: body 似乎只能与 helper:clone 一起使用(参见此处:https://api.jqueryui.com/draggable/#option-appendTo)，由于视觉反馈，我无法使用它(li 如果添加到“早餐”，元素将在列表中消失)。

这是我的 jQuery 代码:

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

并且可以在http://jsbin.com/dinaqabipi/4/上测试. (代码:http://jsbin.com/dinaqabipi/4/edit?html,output)。

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

Answer 1

您的问题可能是由内联样式 position: relative 引起的。您应该将拖动列表项的位置设置为绝对，不拖动时设置为静态。试试这个:

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

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