Div с фиксированной шириной в прокручиваемом контейнере - PullRequest
Новая
       6

Div с фиксированной шириной в прокручиваемом контейнере

0 голосов
/ 25 мая 2018

Я пытаюсь создать область, где я могу бросать и помещать предметы в контейнер с фиксированной шириной.

Контейнер содержит первый div для отображения изображения и в этом divесть второй с уменьшенной площадью, куда можно уронить мои вещи. 

<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 имеют реальную ширину, даже если мы не видим их на дисплее.

При прокруткеи использовать инспектор, вы можете увидеть область перетаскивания с родителем, что приятно.Но когда вы пытаетесь сбросить элемент в той части области перетаскивания, которая скрыта, а не в контейнере, сброс работает, но я этого не хочу.

Снимок экрана инспектора

Есть ли способ избежать этой проблемы без изменения размера изображения и снижения?Когда вы прокручиваете и используете инспектор, вы можете видеть, как область перетаскивания перемещается вместе с ее родителем.

Вот скрипка

1 Ответ

0 голосов
/ 28 мая 2018

Я нашел решение для моей проблемы.Я не знаю, является ли это лучшим решением, но оно работает.

Сначала я сохраняю логическое значение, когда моя мышь находится в главном контейнере или нет: 

$('#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, я проверяю, истинно ли сохраненное ранее логическое значение.Если нет, я выхожу из функции сброса. 

if (!$('#page').data('hover')) { 
            return;
        }
...