7

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?

0

4 Answers 4

8

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>
2
  • This still doesn't seem to fix the issue Mar 14, 2017 at 11:03
  • @99Problems-Syntaxain'tone What version of jqueryui have you tried and didn't work? The answer is 1.5 years old... and haven't used that since
    – fat_mike
    Mar 16, 2017 at 10:09
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>

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

0
2

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>

1

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.