jQuery перетаскиваемый + сортируемый:странное поведение смещения мыши

StackOverflow https://stackoverflow.com/questions/1247086

Вопрос

У меня есть перетаскиваемый список < li > элементы, которые я могу перетащить в другой пустой < ul > элемент.Если я перетащу первый < li > элемент перетаскиваемого оригинала < ul > все работает нормально...

Проблема:

...но когда я перетаскиваю любой другой < li > элемент этого списка "помощник" удаляется от указателя мыши, как только я пересекаю границу получаемой сортируемой таблицы < ul >.Точнее, он перемещается в начало списка.

Кто-нибудь видел это и знает решение?Ну, моя проблема в том, что я просто использую jquery, не очень глубоко вникая в него и никогда по-настоящему глубоко не использовал javascript.

Дополнительная информация о проблеме:

Мой код jQuery:

$(document).ready(function() {
    $('#roleList > li').draggable({
        connectToSortable: '#roleDrop',
        containment: '#container',
        revert: 'invalid'
    });                   
    $('#roleDrop').sortable({
        cursor: 'move',
        containment: '#container',
        revert: true,
        update: function() {
            var order = $('#roleDrop').sortable('serialize');
            $.ajax({
                type: 'POST',
                url: '".$postUrl."',
                dataType: 'html',
                data: order
            });
        }                          
    });
    $('#roleList').disableSelection();
});

В то время как #roleList и #roleDrop являются вышеупомянутыми неупорядоченными списками, #container - это таблица.

Теперь скриншот того, что происходит.

Я начинаю перетаскивать элемент:

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/7bf91122adc241373a5da13b5bde4b231644c1c5/da142000-ff76-012b-41ee-f10bc9db08a6/5a1bfa70-68f6-012c-6d08-f2025930ce6a/v2/thumbnail_large

Когда я пересекаю границу второго < ul > помощник вскакивает.

http://drop.io/download/public/dkabw5hlq3yfm0f84yji/2fad1d633d38cf593da46c638d1930431ea5fd35/da142000-ff76-012b-41ee-f10bc9db08a6/5c65c4c0-68f6-012c-6601-f12da00d9d47/v2/thumbnail_large

Если вам тоже нужна разметка xhtml, пожалуйста, скажите мне.

Это было полезно?

Решение

Попробуйте добавить helper: 'clone' к вашему .draggable Опции:

$('#roleList > li').draggable({
    helper: 'clone',
    connectToSortable: '#roleDrop',
    containment: '#container',
    revert: 'invalid'
});

Согласно документация по jQuery, вы должны установить этот параметр при подключении перетаскиваемого объекта к сортируемому.

Хотя это дает другой интерфейс (перетаскиваемые элементы клонируются, а не перемещаются), это, по крайней мере, временное решение известной проблемы, о которой говорится в документации.Дополнительная обработка событий может привести к удалению исходного элемента из #roleList во время #roleDrop обновить обратный вызов.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top