Question

我有一个小的HTML页面，您可以在其中将列表项拖出div容器，该容器具有大量内容，因此设置为overflow:scroll（使其可滚动）。

如文档中所述，如果我将列表项拖出可滚动容器，我应该将列表项设置为scroll: false。只有helper: clone才能将列表项拖出容器。但这不是我想要的。 appendTo: body似乎只能与helper:clone一起使用（请参阅此处：https://api.jqueryui.com/draggable/#option-appendTo），由于视觉反馈我无法使用{li项目如果添加到＆＃39则会在列表中消失;早餐＆＃39;。）

这是我的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容器拖出溢出容器时可以看到li容器？

Answer 1

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

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

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

溢出容器中的jQuery Draggable

1 个答案: