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

发布于 2024-12-18 10:22:08 字数 1703 浏览 0 评论 0原文

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

有什么想法可能会出问题吗？

原文

I'm trying to use Sortable to reorder the items of a list. I've got a handle for each item of the list, which has :hover and :active css cursor settings, so that the cursor changes when the user mouses over the handles (and again when dragging).

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

The problem is that the :active cursor stops working. I'm not sure why, it works when I don't use sortable, but afterwards, when I pop it up in firebug, I can see that the :hover cursor is being applied, but no shift to :active.

(for simplicity, I'm using -moz-grab and -moz-grabbing in my above example, which don't work in all browsers).

Any ideas what might be going wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

木格 2024-12-25 10:22:08

答案有点晚了，但您可以使用 jQuery UI sortable 选项光标

$('#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>

A bit late answer but you can use the jQuery UI sortable option cursor

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

So you can avoid extra jquery and 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>

回复收藏 0 原文

百思不得你姐 2024-12-25 10:22:08

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

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

No need for seperate handlers with the new .on/.off jQuery functions

回复收藏 0 原文

只等公子 2024-12-25 10:22:08

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

基本上，我放弃了 :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>

Ok, I came up with a hack to solve my problem. It's hackish, so if anyone's got something better, let me know.

Basically, I ditched the :active in favor of a custom class that is added on mousedown and removed on 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>

回复收藏 0 原文

仄言 2024-12-25 10:22:08

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

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

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

If you are using jquery ui, the easiest way is to use css classes:

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

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

回复收藏 0 原文

~没有更多了~