1

我有两个 div：navpane和contentpane。navpane包含项目列表。这些项目被标记为可拖动的选项appendTo:'#contentpane'。我选择#contentpane了此选项而不是正文，因为仅在此窗格内滚动以防溢出。

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

有了appendTo:'body'它就可以了，但是整个浏览器窗口的滚动条就会出现。

这是代码片段：

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

1 回答 1

0

您可以设置containment:'document'可拖动并使用appendTo:'body'它应该停止出现滚动条。例如：

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

出现问题是因为绝对定位的容器正在创建新的、单独的堆叠上下文，并且可拖动对象被附加到具有较低堆叠顺序的东西上。

编辑：替代解决方案 - jsFiddle 演示

如果您真的想在contentpane上保留滚动条，我能想到的唯一解决方案是必须更改标记以将导航窗格移动到contentpane内，以便它们共享相同的堆叠上下文。所以我不得不牺牲一些语义结构来保持滚动条在contentpane上。另一个问题是滚动条会在我使用时在导航窗格下消失。我认为这比看到整个窗口底部的滚动要好。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'
  });
});
于 2012-08-23T15:10:44.117 回答