jQuery UI Сортируемый и: активный курсор мыши для дескриптора - PullRequest
5 голосов
/ 28 ноября 2011

Я пытаюсь использовать 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 в моем примере, который работает не во всех браузерах).

Любые идеи о том, что может быть не так

Ответы [ 4 ]

4 голосов
/ 20 сентября 2015

Ответ немного запоздал, но вы можете использовать jQuery UI sortable option cursor

$('#sortable').sortable({
  cursor: "grabbing"
});

Так что вы можете избежать лишних jquery и css.

<html>
  <head>
    <style>
      span { width: 20px; background: red }
      span:hover { cursor: -moz-grab; }
    </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',
          cursor: 'grabbing'
        });
        $('#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>
2 голосов
/ 20 января 2012

<html>

<head>
  <style>
    .grab {
      cursor: hand;
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;
    }
    .grabbing {
      cursor: grabbing;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
    }
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(document).on('mousedown mouseup', '.grab, .grabbing', function(event) {
        $(this).toggleClass('grab').toggleClass('grabbing');
      });
      $('#drag').draggable();
    });
  </script>
</head>

<body>
  <div id="drag" class="grab" style="width: 200px;height:200px;">Grab Me</div>
</body>

</html>

Нет необходимости в отдельных обработчиках с новыми функциями .on / .off jQuery

2 голосов
/ 29 ноября 2011

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

По сути, я отказался от :active в пользу пользовательского класса, который добавляется в mousedown и удаляется в mouseup. * 1006.*

<html>

<head>
  <style>
    span {
      width: 20px;
      background: red
    }
    span:hover {
      cursor: -moz-grab;
    }
    .grabbed:hover {
      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();
      $('#sortable span').mousedown(function() {
        $(this).addClass('grabbed')
      });
      $('#sortable span').mouseup(function() {
        $(this).removeClass('grabbed')
      });
    });
  </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>
0 голосов
/ 11 апреля 2017

Если вы используете jquery ui, самый простой способ - использовать классы css:

.draggable-item {
  cursor: pointer; // Fallback
  cursor: -webkit-grab;
}

draggable-item:active,
draggable-item.ui-draggable-dragging {
  cursor: -webkit-grabbing;
}
...