CODEWITHSUNDEEP
cssjquery-uijquery-ui-sortablemouse-cursor
rampion
rampion

Reputation: 89043

jQuery UI Sortable and :active mouse cursor for handle

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?

Upvotes: 7

Views: 11703

Answers (4)

Julien Le Coupanec
Julien Le Coupanec

Reputation: 7988

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

Upvotes: 2

fat_mike
fat_mike

Reputation: 887

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>

Upvotes: 8

rampion
rampion

Reputation: 89043

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>

Upvotes: 2

oLinkWebDevelopment
oLinkWebDevelopment

Reputation: 1961

<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

Upvotes: 2

Related Questions