Подтвердить что ты не робот

Пользовательский интерфейс JQuery, объединяющий сортировку с Droppable

Я пытаюсь объединить JQuery UI сортируемый с droppable, чтобы создать несколько страниц для удаления и сортировки. Я установил запись в блоге с демонстрационной демонстрацией здесь:

http://whit.info/blog/2009/06/06/jquery-ui-combining-sortable-with-droppable/

и вот jsFiddle:

http://jsfiddle.net/VUuyx/

Обратите внимание, что вы можете перетаскивать, чтобы сортировать поля, даже в другие столбцы. Вы также можете щелкнуть кнопки страницы, чтобы переключать страницы. Моя проблема заключается в объединении этих двух функций:

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

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

Можете ли вы помочь в этой эзотерической дилемме?

Спасибо!

Update:

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

Кажется, что когда вы убираетесь, а затем снова возвращаетесь, срабатывают соответствующие события. Возможно, если я могу вручную запустить событие mouseout для первого столбца, reset позволит событию mouseover правильно срабатывать.

Я пробовал это:

$(".column:first").trigger('mouseout');

Но я не думаю, что это то же самое, что сортируемый выход. Возможно, я должен уволить это событие?

4b9b3361

ОТВЕТЫ

Ответ 1

Возможно, я не понимаю проблему, но я не думаю, что она имеет какое-либо отношение к "переключению страниц". Если вы одновременно включите обе страницы и попытаетесь перетащить "Врезку 1" в позицию выше "Врезка 4", вы увидите, что она не вызывает то, что "Врезка 4" Sortable получила Draggable, пока вы не пойдете ниже "Вставка 4". Это не решает вашу проблему, но, возможно, поможет вам лучше разобраться в решении проблемы.

Смотрите http://jsfiddle.net/nkBNP/7/ для JSFiddle, который демонстрирует, что я имею в виду.

Ответ 2

По крайней мере, для снижения сверху вниз, я думаю, что решение находится где-то в установке класса ячеек перетаскиваемого и связывает его с сортируемым объектом.

$(".box").draggable({
    tolerance: 'point',
    connectToSortable: '.column',
    snap:false,
    helper : 'clone',
});

В этом примере создается дубликат поля, но он позволяет мне перетащить коробку 1 на страницу 2 и медленно перетащить ее над полем 5 и попасть в верхнюю точку. Это очень чувствительно. Вам может потребоваться настроить сетки и привязку, чтобы заставить ее работать последовательно для случайного пользователя.

Я, конечно, могу себе представить, что сортируемый объект не ожидал, что что-то спустится сверху, потому что оно ожидает, что вещи будут отсортированы из контейнера. Droppable, с другой стороны, ожидает, что вещи поступят с любого направления.

Ответ 3

Да, добавление $('. column'). sortable ( "refresh" ); к завершению функции show_page (id), работавшей для меня (тестировалось только в firefield):

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('.column').sortable("refresh");
}

Ответ 4

Добавление ответа @edtechdev на tolerance: 'intersect создало то, что, как я думал, может вас удовлетворить, Whit:

$(".column").sortable({
    connectWith: '.column',
    opacity: 0.4,
    tolerance: 'intersect', //<--changed
    placeholder: 'place_holder',
    helper: function(event, el) {
        var myclone = el.clone();
        $('body').append(myclone);
        return myclone;
    },
}).disableSelection();

// ...

function show_page(id) {
    $('.page').removeClass('page_active');
    $('#page_'+id).addClass('page_active');
    $('#page_'+id).find('.column:first').sortable('refresh'); //<- added
}

Ответ 6

У Sortable есть недокументированная опция refreshPositions, которая автоматически обновляет положение ваших droppables, когда они также сортируются. Это предотвращает невозможность замены заполнителя вместо фактического droppable.