JQuery UI: Drag and Drop: работа с несколькими контейнерами и свойство переполнения - PullRequest
Новая
       25

JQuery UI: Drag and Drop: работа с несколькими контейнерами и свойство переполнения

2 голосов
/ 21 февраля 2012

Я полностью застрял в проблеме перетаскивания: мне нужно иметь возможность перетаскивать желтые квадраты, расположенные в ячейках строки 1, в одну из ячеек строки 3.

Я сделал небольшой пример JS Bin здесь

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

Я пытался применить свойства "clone / original" и "AppendTo" к перетаскиваемым элементам, но мне не удалось справиться с полосой прокрутки основного контейнера, у которой также есть свойство переполнения.

Любая помощь будет приветствоваться!

1 Ответ

3 голосов
/ 21 февраля 2012

Чтобы можно было перетаскивать элемент в другую ячейку таблицы, вам нужно установить для параметра «helper» значение «clone». 

$(this).draggable({
    opacity: 0.7,
    helper: 'clone',
    scroll: false
});

Теперь в событии «drop» объекта dropble, ui.draggable - это элемент, который перетаскивается.Что вам нужно сделать, чтобы добавить к нему букву. 

$(this).droppable({
    ...
    drop: function(event, ui) {
        $(this).addClass("cell-dropped");
        // "ui.draggable" is the element being dragged
        // "this" is the droppable element
        $(ui.draggable).appendTo(this);
    }
});

Для прокрутки контейнера DIV, вы должны явно установить его значение позиции css относительно: 

.container{
    ...
    position: relative;
}

DEMO

...