スクロール可能なコンテナ内の固定幅のDiv

bugfix> jquery > 投稿 2020-08-22 18:58

固定幅のコンテナ内にアイテムをドロップして配置できる領域を作成しようとしています。

コンテナには最初の div が含まれています画像を表示するには、この div でアイテムをドロップするための面積が縮小された2番目のものがあります。

<div id="page" style="overflow:scroll;">
    <div id="imageContainer">
        <div id="dropZone">
            <label id="item1">Item1</label>
            <label id="item2">Item2</label>
        </div>
    </div>
    <div class="row">
        <div class="form-group" style="padding-top:10px; text-align:center">
            <button id="BacktoProjet">Back</button>
            <button id="btnSave">Save</button>
        </div>
    </div>
</div>

問題は私の画像で、ドロップの幅がコンテナよりも大きいことです。スクロールは画像がオーバーフローしないように機能しますが、インスペクターを開くと、子が div であることがわかります。ディスプレイに表示されなくても、実際の幅があります。

インスペクタをスクロールして使用すると、ドロップ領域がその親とともに移動するのがわかります。しかし、コンテナではなく非表示になっているドロップ領域の一部にアイテムをドロップしようとすると、ドロップは機能しますが、それは望ましくありません。

インスペクターのスクリーンショット

画像とドロップのサイズを変更せずにこの問題を回避する方法はありますか？インスペクタをスクロールして使用すると、ドロップ領域がその親とともに移動するのを確認できます。

がここにありますフィドル

問題の解決策を見つけました。最善の解決策かどうかはわかりませんが、うまくいきます。

まず、マウスがメインコンテナーにあるかどうかに応じてブール値を保存します。
```
$('#page').hover(function () {
        $(this).data('hover', 1); //store in that element that the mouse is over it
    },
        function () {
            $(this).data('hover', 0); //store in that element that the mouse is no longer over it
        });
```
その後、.droppableが呼び出されると、前に保存されたブール値がtrueであるかどうかを確認します。そうでない場合は、ドロップ機能を終了します。
```
if (!$('#page').data('hover')) { 
            return;
        }
```

bugfix

スクロール可能なコンテナ内の固定幅のDiv

jquery

html

css

関連記事