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

Question

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

ram*_*ion 5 css jquery-ui cursor jquery-ui-sortable

我正在尝试使用Sortable重新排序列表中的项目.我有一个列表中每个项目的句柄,它有:hover和:activecss游标设置,以便当用户将鼠标悬停在句柄上时(和拖动时再次),光标会发生变化.

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

Run Code Online (Sandbox Code Playgroud)

问题是:active光标停止工作.我不知道为什么,它在我不使用时有效sortable,但之后,当我在firebug中弹出它时,我可以看到:hover光标正在应用,但没有转移到:active.

(为简单起见,我正在使用-moz-grab,-moz-grabbing在上面的示例中,它不适用于所有浏览器).

什么想法可能会出错？

Answer 1

fat*_*ike 7

回答有点晚，但您可以使用 jQuery UI sortable option cursor

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

Run Code Online (Sandbox Code Playgroud)

所以你可以避免额外的 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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

ram*_*ion 2

好吧，我想出了一个办法来解决我的问题。这是很黑客的，所以如果有人有更好的东西，请告诉我。

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，1 月前
查看次数：	8734 次
最近记录：	8 年，9 月前