JQuery Sortable - Обрабатывать ошибку в IE? - PullRequest
Новая
       16

JQuery Sortable - Обрабатывать ошибку в IE?

8 голосов
/ 17 февраля 2012

У меня есть список div, которые я хочу сортировать.В каждом элементе div есть текст, а также дескриптор внутри него (из-за пользовательского интерфейса я хочу сортировать, только если перетаскивается левая половина элемента списка).В Chrome / FireFox это прекрасно работает, но в IE, если вы щелкнете по тексту, он не позволит вам сортировать, даже если текст находится внутри дескриптора.

У меня есть урезанный макет проблемы здесьУбедитесь, что вы используете Internet Explorer для тестирования: http://jsfiddle.net/t8Ebd/

Я предполагаю, что это многоуровневая вещь, но безуспешно пробовал следующие подходы:

  • Изменение z-индексы текста и дескриптора
  • $ (". itemname"). disableSelection ();
  • ms-user-select: none;user-select: none;
  • добавление текстового класса в список дескрипторов - это решает проблему, но не будет работать для меня, поскольку я не хочу, чтобы текст в правой половине элемента спискатриггерная сортировка
  • Установка цвета фона на ручке - я знаю, это звучит странно, но если я установлю цвет, то он станет самым верхним элементом и, следовательно, будет работать правильно, хотя и скрывает текст, который не будет работатья.

У кого-нибудь есть другие идеи ??

Ответы [ 2 ]

6 голосов
/ 17 февраля 2012

У вас есть лишняя запятая после ".sorthandle", которая разрывается в IE: 

$("ul").sortable({
    handle: ".sorthandle",  // here
});

Измените ее на: 

$("ul").sortable({
    handle: ".sorthandle"
});

Я предложил вкомментарий для использования метода disableSelection() из пользовательского интерфейса jQuery.Хотя это, похоже, и не работает.

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

.sorthandle {
    ...
    background-color: White;
    opacity: 0;
    filter: alpha(opacity = 0);
}​

DEMO

Конечно, это удаляет вашу зеленую границу, я не знаю, важно это или нет.

Может быть этобудет работать с использованием png прозрачного фонового изображения.Я предполагаю, что дескриптор не имеет фона, IE выделяет текст под ним.

1 голос
/ 17 февраля 2012

измените свой макет на: (что-то вроде хака) 

<div class='sorthandle'><span>&nbsp;</span></div>

и добавьте этот CSS: 

 .sorthandle span{
    width:100%;
    background-color:blue;
    opacity:0.0;
    filter:alpha(opacity=0);
    display:block;
}

ИСПОЛЬЗУЙТЕ ЭТО, ЕСЛИ ВЫ ХОТИТЕ, ЧТОБЫ ХРАНИТЬ ГРАНИЦУ НА СОРДЖЕ1007 *

...