JQuery UI 1.8.16 и Firefox 6 - сортировка не работает должным образом

Когда я разрабатывал приложение с помощью jQuery (последняя версия), мой браузер Firefox решил обновить себя до версии 6. Сразу после этого я получил, что стандартная "сортируемая" функция jquery ui не работает должным образом. Я попробовал на сайте JQuery и то же самое. Пробовал с демонстрационными файлами, загруженными с пакетом jquery ui => тот же результат. Нет хаков, нет привычки, только ваниль.

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

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

Кто-нибудь сталкивался с таким багом в Firefox 6?

К вашему сведению, эта сортируемая функция работала как шарм на FF 5.0

Источник

3 ответа

Решение

Все в порядке, ребята! Я нашел причину такого странного поведения!!! Его название - FireQuery 1.0 аддон для Firefox.

Когда я увидел, что Гунтрам говорит мне, что он использует FF6 с последней версией jQuery + jQuery-UI вообще без проблем, я подумал, может ли это произойти из аддона. Поэтому я отключил все и повторно активировал их один за другим, перезапуская после каждого включения. Я нашел виновный аддон: FireQuery 1.0.

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

Источник

У меня та же проблема. После однодневного тестирования я выяснил, в чем проблема и что вызывает такое поведение.

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

-----------
| Header  |
-----------
|         |
|Contents |
-----------

Заголовок перетаскивается. Если вы быстро или ошибочно перемещаете курсор мыши во время перетаскивания, и курсор мыши каким-то образом перемещается за пределы заголовка (например, на содержимое), div прилипает к курсору.

Чтобы снова закрепить div на странице, вы можете снова быстро переместить курсор и попытаться вернуть его в заголовок. Затем кажется, что события снова прикреплены, и вы можете поместить div обратно на страницу.

Подводя итог, можно сказать, что мышь сдвигает div с присоединенными сортируемыми событиями, поэтому объект не видит события mouseup или click, которые возвращают объект на страницу.

К сожалению, я не знаю, как это исправить.

РЕДАКТИРОВАТЬ

Мы внедрили решение, которое работает для нас, но не может быть идеальным для всех. Просто .trigger("mouseup") на перетаскиваемом элементе, когда происходит событие щелчка на любом элементе, который не должен быть перетаскиваемым. Это вернет перетаскиваемый элемент обратно на страницу.

Источник

Для меня сортировка работает хорошо. элементы не двигаются неожиданно.

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

так все же странное поведение. я не знаю, как это работает на ff5, я на ff6, последняя версия jquery.

РЕДАКТИРОВАТЬ:

После того, как я нашел это: http://weblogs.asp.net/jeffwids/archive/2011/01/31/jquery-textbox-in-sortable-is-not-clickable-selectable.aspx я внимательно посмотрел на отмену опция, предоставляемая jquery-сортируемой

я наконец мог решить это так:

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="text" ></input></li>
    <li class="ui-state-default" style="height: 70px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><textarea cols="20" rows="3">textarea</textarea></li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><button>button</button></li>
</ul>
<script>
        // initialize the sortable including the cancel option
        $( "#sortable" ).sortable({cancel: 'input,button,textarea'});
</script>
Источник
Другие вопросы по тегам