Вопросы Теги

jQuery UI Sortable и :active mouse cursor для handle

Я пытаюсь использовать Sortable для изменения порядка элементов списка. У меня есть хэндл для каждого элемента списка, который имеет настройки :hover и :active css курсора, так что курсор меняется, когда пользователь наводит курсор мыши на хэндл (и снова при перетаскивании). 

<html>
  <head>
    <style>
      span { width: 20px; background: red }
      span:hover { cursor: -moz-grab; }
      span:active { cursor: -moz-grabbing; }
    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script>
      $(function(){
        $('#sortable').sortable({ handle: 'span' });
        $('#sortable span').disableSelection();
      });
    </script>
  </head>
  <body>
    <ul id="sortable">
      <li><span>grab 0 here</span> I'm 0!</li>
      <li><span>grab 1 here</span> I'm 1!</li>
      <li><span>grab 2 here</span> I'm 2!</li>
      <li><span>grab 3 here</span> I'm 3!</li>
      <li><span>grab 4 here</span> I'm 4!</li>
      <li><span>grab 5 here</span> I'm 5!</li>
      <li><span>grab 6 here</span> I'm 6!</li>
      <li><span>grab 7 here</span> I'm 7!</li>
    </ul>
  </body>
</html>

Проблема в том, что курсор :active перестает работать. Я не уверен почему, он работает, когда я не использую sortable, но потом, когда я открываю его в firebug, я вижу, что курсор :hover применяется, но нет сдвига на :active.

(для простоты я использую -moz-grab и -moz-grabbing в моем примере выше, которые работают не во всех браузерах).

Есть идеи, что может идти не так?

5
задан rampion 28 November 2011 в 16:26
поделиться