Question

我在选项卡窗格中有一个可拖动窗口，它位于设置为overflow-y的容器内：滚动。但是draggable不能被拖到容器外面（这是必需的，因为放置目标位于容器之外！）。

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>

CSS

.container {
    height: 350px;
    overflow-y: scroll;
    background-color: #fafafa;
    width: 75%;
}

.drag {
    width: 20px;
    height: 20px;
    background-color: lightpink;
}

的Javascript

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

在http://jsfiddle.net/79u5a/2/

上试试

在我的应用程序中，我有各种这样的容器（有溢出y）并且每个包含draggables。除了标签内的那些外，所有可拖动的都可以使用。请让我知道一个解决方案..我需要能够将容器中的盒子拖到容器外面。

Answer 1

在我看来你的问题是overflow-y，你在问题中提到过，所以我有一个解决方案，如果你可以创建另一个类，如.containerA{...}但没有overflow css属性然后你可以这样做：

CSS：

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

jQuery的：

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

选项卡内的jquery-ui draggable不能在overflow-y的容器外拖动

1 个答案:

CSS：

jQuery的：

Fiddle