jQuery UI 可排序和：用于句柄的活动鼠标光标答案

【问题标题】：jQuery UI Sortable and :active mouse cursor for handlejQuery UI 可排序和：用于句柄的活动鼠标光标
【发布时间】：2011-11-28 16:26:01
【问题描述】：

我正在尝试使用 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，它们不适用于所有浏览器）。

有什么想法可能会出错吗？

【问题讨论】：

标签： css jquery-ui jquery-ui-sortable mouse-cursor

【解决方案1】：

答案有点晚，但您可以使用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>

【讨论】：

这似乎仍然无法解决问题
@99Problems-Syntaxain'tone 你试过什么版本的jqueryui，但没有用？答案是 1.5 岁......从那以后就没有使用过

【解决方案2】：

<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 函数不需要单独的处理程序

【讨论】：

【解决方案3】：

好的，我想出了一个技巧来解决我的问题。这很hackish，所以如果有人有更好的东西，请告诉我。

基本上，我放弃了:active，转而使用在mousedown 上添加并在mouseup 上删除的自定义类。

<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>

【讨论】：

【解决方案4】：

如果你使用 jquery ui，最简单的方法是使用 css 类：

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

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

【讨论】：