Question

我有两个div： navpane 和 contentpane 。 navpane 包含项目列表。这些项目使用选项appendTo:'#contentpane'标记为可拖动。我为此选项选择了#contentpane，而选择了非正文，因为只有在此窗格内滚动才会出现溢出。

一切正常，但有一个视觉缺陷。在拖动操作期间，拖动的项目仅在内容窗格区域中可见，而不在导航窗格区域中可见。

使用appendTo:'body'即可，但随后会显示整个浏览器窗口的滚动条。

以下是代码段：

$(".item").draggable({
    helper: 'clone',
    cursor: 'move',
    scroll: true,
    appendTo: '#contentpane'
});

Answer 1

您可以在可拖动时设置containment:'document'并使用appendTo:'body'来阻止滚动条出现。例如：

$(".item").draggable({
    helper: 'clone',
    appendTo: 'body',
    cursor: 'move',
    containment:'document'
});

问题出现了，因为绝对定位的容器正在创建新的，单独的堆叠上下文，而draggable正在附加到堆叠顺序较低的内容。

编辑：替代解决方案 - jsFiddle demo

如果您真的想要将滚动条保留在 contentpane 上，我能想到的唯一解决方案就是必须更改标记以在中移动 navpane > contentpane 所以他们共享相同的堆叠上下文。所以我不得不牺牲一些语义结构，以便将滚动条保留在 contentpane 上。另一个问题是滚动条将在 navpane 下消失，因为我正在使用position:fixed。我认为这比看到整个窗口底部的滚动更好。

HTML

<div id="contentpane">
    <div id="navpane">
      <div class="item">Item A</div>
      <div class="item">Item B</div>
      <div class="item">Item C</div>
      <div class="item">Item D</div>
    </div>
</div>

CSS

.item {
    border: 1px solid black;
    width:200px;
    margin-top: 5px;
}

#navpane {
    background-color:lightblue;
    width:250px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
}

#contentpane {
    background-color:lightgreen;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow-x:auto;
    overflow-y:hidden;
}

的JavaScript

$(function () {
  $('.item').draggable({
      helper: 'clone',
      appendTo: '#contentpane',
      cursor: 'move'
  });
});

将项目拖动到其他div，并在源div上隐藏appendTo

1 个答案:

HTML

CSS

的JavaScript