Подключение Draggable к Sortable вызывает переход вспомогательного элемента - PullRequest
Новая
       69

Подключение Draggable к Sortable вызывает переход вспомогательного элемента

4 голосов
/ 04 мая 2011

У меня есть перетаскиваемый объект jQueryUI и сортируемый объект на странице.

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

Вот демоверсия: http://jsfiddle.net/travisrussi/aBhDu/1/

Воспроизвести:

  • Перетащите «Элемент 5» из перетаскиваемого элемента div (верхний блок) в сортируемоеdiv (нижний блок)

Фактический результат:

  • Элемент 5 перепрыгивает в верхний левый угол при перетаскивании по сортируемому - http://i.stack.imgur.com/474OP.jpg

Похоже, что перетаскиваемый элемент переключается с абсолютного положения на .Перетаскиваемый 'li' переключается с: 

<li class="ui-state-default ui-draggable" style="position: relative; left: 52px; top: 9px;">Item 3</li>

на это: 

<li class="ui-state-default ui-draggable ui-sortable-helper" style="position: absolute; left: 67px; top: 91px; width: 80px; height: 20px;">Item 3</li>

, когда перетаскиваемый объект перетаскивается в сортируемый объект.

Thisэто соответствующий фрагмент из jQueryUI 1.8.12 (начинается со строки 3041): 

//The element's absolute position on the page minus margins
this.offset = this.currentItem.offset();
this.offset = {
    top: this.offset.top - this.margins.top,
    left: this.offset.left - this.margins.left
};

// Only after we got the offset, we can change the helper's position to absolute
// TODO: Still need to figure out a way to make relative sorting possible
this.helper.css("position", "absolute");
this.cssPosition = this.helper.css("position");

$.extend(this.offset, {
    click: { //Where the click happened, relative to the element
        left: event.pageX - this.offset.left,
        top: event.pageY - this.offset.top
    },
    parent: this._getParentOffset(),
    relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
});

//Generate the original position
this.originalPosition = this._generatePosition(event);
this.originalPageX = event.pageX;
this.originalPageY = event.pageY;

Есть ли какой-то параметр конфигурации, который я не использую?

Есть ли проблема с CSS?

Или это ошибка в jqueryUI?

Ответы [ 2 ]

4 голосов
/ 05 мая 2011

Основной причиной прыжка было то, что опция «помощник» перетаскиваемого не была установлена ​​на «клон».Если вы используете помощника-клона, проблема с прыжками исчезнет.

Если вам нужно использовать «оригинальную» настройку помощника, у вас все равно останется проблема с прыжками.Одним из возможных решений этой проблемы может быть использование настраиваемой вспомогательной опции, как показано здесь: Справка по параметру jQueryUI Draggable Helper .Идея состояла бы в том, чтобы преобразовать позицию из относительной в абсолютную во время создания помощника.

Вот ссылка на рабочую демонстрацию с использованием помощника 'clone': http://jsfiddle.net/travisrussi/aBhDu/

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

Кажется, что пользовательская вспомогательная функция решает эту проблему, например: 

        $( ".draggable" ).draggable({
            connectToSortable: "#sortable",
            //helper: "original",
            revert: "invalid",
            helper: function() {
                return $(this);
            }
        });
...