Add drag cursor on hover?

[lukasoppermann]

By default a cursor should indicate item that an item is draggable and change on drag.

This turns out to be very tricky. The states that need to be supported:

Must:

• [ ] draggble: cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;
• [ ] dragged cursor: -moz-grabbing; cursor: -webkit-grabing; cursor: grabing;

Nice to have:

• [ ] copy: when item is moved into list where it can be copied, show copy cursor
• [ ] not-allowed: show not allowed cursor when moving somewhere on a sortable where the item can not be dropped.

Maybe this helps:

• https://stackoverflow.com/questions/44447210/custom-cursor-with-drag-and-drop-an-html-element-without-libraries

[CWSites]

I was able to accomplish this by adding the following to my CSS

.is-hovered {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.sortable-placeholder {
    cursor: grabbing !important;
    cursor: -moz-grabbing !important;
    cursor: -webkit-grabbing !important;
}

[lukasoppermann]

Can you upload an example of this? I remember having some issues when dragging.

[CWSites]

My config was as follows. I'll setup a codepen with a sample.

    sortable('.sortable', {
      forcePlaceholderSize: true,
      placeholderClass: 'sortable-placeholder',
      hoverClass: 'is-hovered'
    });

[CWSites]

Here is a codepen: https://codepen.io/CWSites/full/wjeNbb/

I noticed some odd behavior though, the sortable area is only the top row of objects even though I have adjusted the styles to be full width. The dark gray background is the sortable container but notice the red border only appears at the top. Similarly the grabbing cursor style only works in that top box and not 100% of the time.

[CWSites]

Hey @lukasoppermann I fixed all of the issues and improved the sortable-placeholder as well. Check out my referenced codepen above for a working example.

Configuration

sortable('.sortable', {
    forcePlaceholderSize: true,
    placeholderClass: 'sortable-placeholder',
    hoverClass: 'is-hovered'
});

Styles Applied

// Class of the element that is sortable
.box {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    &.is-hovered {
      cursor: grab;
      cursor: -moz-grab;
      cursor: -webkit-grab;
  }
}

// Class of the sortable place holder
.sortable-placeholder {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

[CWSites]

Is this something that you would want added to the docs or code? Can you point me in the right direction of where I can contribute this update?

[lukasoppermann]

Hey, very neat, I think this issue should be enough as a reference. I would like this behaviour to be added as a default to the library, but of course that is a bit more complicated, as you can not rely on classes.

[joephuz]

this doesn't really work for me... i think this needs to be achieved by JS. The hover gets triggered when moving the element so its sets it back to 'grab'

[lukasoppermann]

Hey @joephuz would you be able to send a PR for this? That would be great.

[joephuz]

@lukasoppermann Ill give it a shot if i have some time!