React-sortable-hoc: Clickable links inside items

[lambdazen]

What is the best way to support links inside sortable items?

Here's a JSFiddle showing the issue: https://jsfiddle.net/lambdazen/6r7r2cva/7/ -- you can try clicking the links once the page has loaded. It doesn't work. However, a right-click followed by "Open in a new tab" works as expected.

My current workaround is to attach onMouseDown to a call to window.open. Is there a better way?

Thanks in advance! Love your library.

[clauderic]

Hey @lambdazen, thanks for the kind words and for providing a fiddle :)

To answer your question, there is a better way. As of 0.0.8, you can pass in a shouldCancelStart function to your enhanced SortableContainer to programatically cancel sorting from triggering based on the event. The default implementation prevent's sorting from being triggered on input, textearea and select elements. Here's an example to prevent links from triggering sorting:

function shouldCancelStart(e) {
    // Cancel sorting if the event target is an anchor tag (`a`)
    if (e.target.tagName.toLowerCase() === 'a') {
        return true; // Return true to cancel sorting
    }
}

Here's a fiddle with this implementation: https://jsfiddle.net/6r7r2cva/8/

You can extend this function any way you see fit to match your use-case :)

Alternatively, you can use the distance prop and set it to a low value like 1. This will also allow clicks to pass through.

[lambdazen]

Thanks!