选项卡内可拖动的jquery ui不能在溢出为y的容器外拖动

我在选项卡窗格中有一个Dragable，它位于设置为overflow-y:scroll的容器中。但是不能将可拖动对象拖动到容器外部（这是必需的，因为拖放目标位于容器外部！）

HTML

<div class="container">
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Header</a></li>
      </ul>
      <div id="tabs-1">
        <div class="drag">
        </div>
        <p>Drag the pink box. It cannot go outside the gray container. If "overflow-y: scroll" is removed from its css, the box can be dragged outside.</p>
      </div>
    </div>
    <p>
        <div class="drag"></div> If the box is not inside of a tab, it can dragged outside the container.
    </p>
</div>

Javascript

$("#tabs").tabs();
$(".drag").draggable({helper: "clone"});

试试这个

在我的应用程序中，我有各种这样的容器（具有overflow-y），每个容器都包含draggables。除选项卡内的拖动项外，所有拖动项均可工作。

---

请告诉我这个问题的解决办法。。我需要能够将选项卡中的框拖到容器外部。

我认为您的问题是您在问题中提到的

overflow-y

，因此我有一个解决方案，如果您可以创建另一个类，如

.containerA{…}

，但没有

overflow

css属性，那么您可以这样做：

CSS: jQuery：

---

隐马尔可夫模型。。有趣的是，虽然更改样式会导致页面布局发生更改，但看起来可能不正确。另外，我想知道/为什么/标签外的框可以工作，而标签内的框不能工作？嗯…这可能是由于js，因为你在标签上实现了标签功能，所以我认为它有一些东西不能让它移动。找到答案了！在查看可拖动的api时，有一个名为“appendTo”的选项，它允许您说出辅助程序附加到哪个元素。将“.container”添加到可拖动选项的

appendTo:“.container”

，效果非常好！

$("#tabs").tabs();
$(".drag").draggable({helper: "clone"});

.containerA {
  height: 350px;
  background-color: #fafafa;
  width: 75%;
  /* this class without overflow property*/
}

$(".drag").draggable({
   helper: "clone",
   start: function (e, ui) {
      $('.container').toggleClass('container containerA');
   },
   stop: function (e, ui) {
      $('.containerA').toggleClass('containerA container');
   }
});