jQuery UI Drag & Drop

Question

Я пытался использовать решение, опубликованное здесь: jQuery Проблема перетаскивания и переполнения , но я не могу заставить его работать на себя У меня есть контейнер div (div # container), который оборачивает все мои перетаскиваемые элементы div. У контейнера div # переполнение установлено на auto. Я использовал параметр прокрутки и установил его в false, но он все еще прокручивается. Есть идеи?

Мой HTML:

<div id="container">
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
    <div class="draggable"> Drag Me </div>
</div>

Мой CSS:

div#container {
    width: 300px;
    height: 300px;
    overflow: auto;
}

div.draggable {
    padding: 3px;
    font-size: 1.4em;
}

Мой Javascript:

$(function(){
    $(".draggable").draggable({ 
        scroll: false 
    });
});

Answer 1

Возможно, в вашем CSS "overflow: auto" должно быть установлено на контейнере, т.е.

div#container {
    width: 300px;
    height: 300px;
    overflow: auto;
}

div.draggable {

}

Answer 2

Проблема заключается в установке overflow:auto - его определение состоит в том, чтобы при необходимости показывать вертикальные или горизонтальные полосы прокрутки.

Scroll: false в перетаскиваемом элементе не означает «не создавать полосы прокрутки», скорее, если перетаскиваемый объект подходит к краю элемента div для автоматической прокрутки или нет.

Скажем, у пользователя был очень маленький экран (400х400), а ваша страница была огромной (2000х2000), и они хотели перетащить элемент с одной стороны на другую.

При scroll:true, когда элемент приближается к краю окна, он автоматически прокручивается вместе с элементом. С scroll: false им придется перетаскивать до 400px, отбрасывать элемент, прокручивать вручную, поднимать элемент и перетаскивать снова.

Другой пример scroll: true - это то, как работает выделение текста в документе, когда вы приближаетесь к краю страницы, программа медленно прокручивает вниз, а если вы перемещаете курсор в самое нижнее положение, она очень быстро прокручивается / подсвечивается.

В любом случае, вернемся к коду.

Чтобы проиллюстрировать, измените свой CSS на этот:

div.draggable {
    padding: 3px;
    font-size: 1.4em;
    border: 1px solid black;
}

Затем перетащите элемент по мере приближения к той стороне, на которой появляется полоса прокрутки из-за ширины элемента div. Если вы включите scroll:true и заметите, что он прокручивается вместе с вами, когда вы приближаетесь к краю.

Теперь вы можете изменить #container на этот CSS, чтобы полностью скрыть все, что находится за его пределами:

div#container {
    width: 300px;
    height: 300px;
    overflow: hidden;
}

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

Так что, если вы теперь перетаскиваете, вы заметите, что граница div выходит за пределы контейнера и не создает полосу прокрутки. Теперь, как правило, вы определяете жесткую ширину для перетаскиваемых элементов div, чтобы предотвратить подобные вещи, поскольку overflow:hidden может скрывать критический контент.

Вот скрипка .

Answer 3

Возможно, это не совсем тот ответ, который вы искали, но я думаю, что, возможно, стоит взглянуть на вашу ситуацию.

Инфраструктура Fluid Infusion включает в себя средство переупорядочения макетов, которое выполняет то, что вы пытаетесь сделать. Вы можете увидеть отличную демонстрацию этого - включая весь источник - здесь: http://fluidproject.org/releases/1.1.2/demos/reorderer/layoutReorderer/demo.html

Infusion построен с использованием jQuery и может быть добавлен на вашу страницу простым и понятным способом.