1

navpaneとcontentpaneの 2 つのdiv があります。navpaneにはアイテムのリストが含まれています。これらの項目は、オプションでドラッグ可能としてマークされますappendTo:'#contentpane'。オーバーフローの場合にのみこのペイン内でのみスクロールするため、本文ではなく#contentpaneこのオプションを選択しました。

すべて正常に動作しますが、視覚的な欠点が 1 つあります。ドラッグ操作中、ドラッグされたアイテムはコンテンツペイン領域にのみ表示され、ナビゲーションペイン領域にも表示されません。

問題ありませんが、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デモ

本当にコンテンツペインにスクロールバーを残したい場合、私が考えることができる唯一の解決策は、同じスタッキングコンテキストを共有するようにコンテンツペイン内でナビゲーションペインを移動するためにマークアップを変更する必要があることです。そのため、コンテンツペインにスクロールバーを保持するために、いくつかのセマンティック構造を犠牲にする必要がありました。もう1つの問題は、を使用しているときにスクロールバーがナビゲーションペインの下に表示されなくなることです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 に答える