Два вопроса относительно .draggable в Chrome и IE - PullRequest
Новая
       1

Два вопроса относительно .draggable в Chrome и IE

4 голосов
/ 24 апреля 2011

Я создаю игровую доску с кусочками, которые вы можете перемещать, и все они с помощью класса .draggable jQuery UI.Есть игровые фигуры, которые можно перетаскивать, и они лежат на столе, который является сеткой.И стол, и фигуры связаны с элементом div, который сам по себе можно перетаскивать.Цель состоит в том, чтобы дать игрокам большую игровую площадку, на которую они могут перемещаться и смотреть.

URL: http://shionyr.com/gamekeeper/dragger.php

Таблица отлично работает в Firefox.Однако в Chrome и IE возникают две совершенно разные проблемы, по-видимому, из-за одной и той же основной проблемы с тем, как мой код обрабатывает элементы.

Chrome: Родительский div выглядит смешно после первого разаты тянешь это.В частности, если вы начнете перетаскивать его во второй раз, он не начнет перетаскивать, пока вы не отпустите кнопку мыши.Проблема исправляется, если вы перезагрузите страницу, и не происходит, если вы слегка перетаскиваете за пределы области сетки.

IE: При попытке перетащить изображение родительский элементdiv и изображение перетаскиваются одновременно, и изображение ускоряется, чтобы приспособиться к движению div.Я попытался использовать z-index, чтобы исправить это, не джаз.

Я попытался использовать несколько настроек, стилей, тегов событий, чтобы решить эту проблему, но, похоже, ничего не работает на 100%.Спасибо за помощь!

1 Ответ

1 голос
/ 24 апреля 2011

Chrome Issue:

Вы использовали класс no-select для предотвращения выделения событий перетаскивания мышью. Структура вашего документа: 

<div><!-- Main container -->
   <table>...</table><!-- Grid -->
   <img><!-- Draggables -->
</div>

Вы поместили свой класс no-select на свой стол, который не затронул ваши перетаскиваемые изображения. Из-за случайного поведения браузера, когда вы перемещали контейнер, перетаскивая сетку, был создан невидимый выбор. Когда вы начали перетаскивать второй раз, вы фактически начали перетаскивать выбранный контент, что привело к запуску перетаскивания при наведении мыши.

Решение: Поместите свой класс no-select в свой контейнерный блок вместо сетки таблицы.

Примечание: Пользовательский интерфейс jQuery имеет собственную недокументированную служебную функцию, вместо использования класса no-select вы можете просто позвонить $('div').disableSelection();.

IE выпуск:

Существует известная проблема с jQuery UI 1.7+, которая до сих пор не устранена и затрагивает вложенные перетаскиваемые объекты в Internet Explorer. См. отчет об ошибке . ОБНОВЛЕНИЕ: эта ошибка была исправлена ​​в jQuery UI 1.8.16.

Проблема в основном в том, что под IE события перетаскивания всплывают на DOM, даже если они обрабатываются. Обходной путь, предложенный в комментариях, состоит в том, чтобы вручную отменить всплывающее событие события mousedown на внутренних перетаскиваемых объектах (в вашем случае это перетаскиваемые изображения): 

$('img').mousedown(function(e) {
    if($.browser.msie) {
         e.stopPropagation();
    }
});

Это всего лишь взлом, пока он не будет исправлен, надеюсь, в jQuery UI 1.9.

Проблема IE9: Обратите также внимание, что в IE9 ни одна из ваших перетаскиваемых функций не работает по какой-то странной причине.

...