Skip to content

iOS Safari fixed

Compare
Choose a tag to compare
@tajo tajo released this 11 Feb 04:41

You should notice a big improvement if you are using Safari on iOS. The drag and drop action will now block the scrolling. The previous version didn't do that and it made react-movable almost unusable on iOS.

It was necessary to overhaul some internal event handling. There is a slight API change in case you are using custom handle target. You should now mark it with data-movable-handle attribute as you can see here.

It's simple like this:

<button
  data-movable-handle
>
  MOVE HANDLE
</button>

If no element inside of the list item has data-movable-handle, the whole item is draggable.

renderItem is not passing onMouseDown and onTouchStart into your list items anymore. It's now handled globally via document.addEventListener. That was necessary to set these events as non-passive and enable scroll blocking in iOS Safari.

Also, you don't have to anymore event.stopPropagation on interactive elements (buttons etc) that are placed inside of your list items. Those are now filtered automatically when react-movable considers if the dnd action started.

So unless, you were somehow utilizing onMouseDown or onTouchStart, you can safely upgrade.

Flow types were fixed and updated as well.