Request: prevent dragging on custom handle

[NeXTs]

I need to implement table with column sorting and in addition to that - table headers should be sortable horizontally

For horizontal headers sorting I've used your great library
Now I need to handle column sorting by clicking arrows (you know, up|down arrows) inside every header row to sort ASC/DESC specific column.

To do this I need somehow cancel event propogation by clicking arrows so that react-sortable-hoc doesn't begin dragging. I've tried

<SortIcon onClick={(e) => {
    e.stopPropagation()
    e.preventDefault()
    onSortColumn(value.alias, users)
    return false
}}/>

but it does not prevent dragging :(

Is it possible?

[NeXTs]

Something like cancel from jQuery UI Draggable

[bvaughn]

One thing you could try would be to limit the draggable region in your table headers (useDragHandle == true) so that users could only drag when they click on a drag-handle (SortableHandle). Then you could treat a click-on-header-text as a vertical-sort action, and a click-on-drag-handle as a horizontal-sort action.

[clauderic]

Just published 0.0.8 to npm with support for shouldCancelStart, which should solve most use cases. The implementation is up to you, though by default it will prevent sorting on text / select inputs. Alternatively, you could add a custom data-attribute to the elements you want to prevent from being sorted.

Here's the default implementation:

function shouldCancelStart(e) {
    // Cancel sorting if the event target is an `input`, `textarea`, `select` or `option`
    if (['input', 'textarea', 'select', 'option'].indexOf(e.target.tagName.toLowerCase()) !== -1) {
        return true; // Return true to cancel sorting
    }
}

[NeXTs]

thanks!