React-sortable-hoc: Drag example Styles

[dotesfera]

Hi, great package.

Can anyone provide the styles on the drag example? I'm trying to use helperClass prop with css styles but can't see the helper container when begin dragged....

Best regards

[th1ru]

You CSS Styles for the draggable items should be at the "root" level. They should be properties of the "body" itself to avoid losing styles.

[dotesfera]

I'm talking on the styles of the example here: https://clauderic.github.io/react-sortable-hoc/#/basic-configuration/drag-handle?_k=jn0ct0

I'm trying to achieve this, but can't understand how it's done, as I tried pass the styles on helperClass prop...

[eminx]

I would also like to know how we can implement the elevation style on grab and drag of element...

[eminx]

<SortableContainer ... helperClass="sortableHelper">
...
const SortableItem = sortableElement(({value}) => <li className="sortable-thumb">{value}</li>);

.sortableHelper {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.sortable-thumb:hover {
  cursor: grab;
}

This works!
Unfortunately though, I don't still know how I can have the cursor css value change to grabbing when it's being dragged. Any suggestions?

[anton6]

I also can't get "grabbing" cursor to work. I tried using the :active class selector, but it's not working. Any suggestions?

[anton6]

ok so I got the grabbing cursor working with this:

const SortableContainer = sortableContainer(({children}) => <div className="sortable-container">{children}</div>);
const SortableItem = sortableElement(({value}) => <div className="sortable-item">{value}</div>);

// styles

.sortable-item {
  pointer-events: auto !important;
}

.sortable-container > .sortable-item:hover {
  cursor: grab;
}

body > .sortable-item:hover {
  cursor: grabbing;
}

Basic idea is that for some reason the library disables pointer-events style when you are dragging the item so I overwrite it with the !important. The original sortable-item you click on is hidden and another one is injected at body level, hence the separate hover style to watch for item element at one level down from the body.

Still feels a bit hacky, so if anyone knows of a better way please do share.

[drichar]

@anton6 Thank you! Only correction: should be cursor: grab; not pointer: grab;

[anton6]

@anton6 Thank you! Only correction: should be cursor: grab; not pointer: grab;

thanks for pointing that out (pun intended)