Cursor style doesn't apply to helper element

Goal

Render cursor as grabbing when dragging an item

Approach

Add helperClass="moving" to the SlickList, and target it with

.moving {
  cursor: grabbing;
}

Problem

The cursor: grabbing; style does not appear to apply. However, the targeting is definitely working; other styles (such as background-color) do apply to the helper.

Cause

The helper element has an inline style: pointer-events: none;. It is applied here: https://github.com/Jexordexan/vue-slicksort/blob/f7d3016062596d46dfa35bf4be75509c4478fbdc/src/ContainerMixin.js#L256 When pointer events are disabled, browsers seem to ignore cursor CSS.

Workaround

The choice to set pointerEvents to none was deliberate; without it we get undesirable behavior. Since the helper is created at the bottom of the the <body>, if pointer events are enabled, as soon as the helper moves, all text below the list is highlighted. Additionally, as the helper moves, other elements of the list are highlighted. So we need a three step approach:

Add pointer-events: auto !important; to the helper styling
Prevent text below the list from being selected by specifying appendTo on the SlickList. I set it to append to the list itself.
Prevent text within the list from being selected by adding user-select: none; to each list item.

Fix

I don't have a recommended fix, and I don't believe one exists. Setting user-select:none; may be undesirable for some users. Setting the default appendTo as the list itself may be undesirable, and would be a breaking change to boot. Setting pointer-events: auto; would definitely be a breaking change.

This may be the true issue behind issue #27 .

Edit: Removed JSFiddle demo links. They were broken by dead unpkg.com URLs, this issue has been close for 2 years, and I doubt they'd have helped anyone regardless.

Jexordexan / vue-slicksort