Sortable.js stop propagation of a mousedown event on Safari

Question

i noticed that when i add a mousedown event listenner and stop the propagation on a Sortable child, this specific element becomes "unsortable". This behavior only occurs in Safari (I tested Safari, Firefox and Chrome) and before i open a ticket i'd like to know if i missed something or if someone could think of a workaround.

A jsFiddle to illustrate my problem:

HTML:

<ul id="foo">
  <li id="bar">bar 1</li>
  <li>foo 2</li>
  <li>foo 3</li>
</ul>

JS:

Sortable.create(foo, {
  group: 'foo',
  animation: 100
});

var bar = document.getElementById('bar');
bar.addEventListener('mousedown', function(event) {
    event.stopPropagation();
});

https://jsfiddle.net/83xLnomw/5/

On Chrome/Firefox Bar 1, Foo 2, Foo 3 can be sorted without trouble. On Safari, you can sort Foo 2 and Foo 3, but Bar 1 stays still.

Thank you !

Answer 1

By adding a mousedown event listener to the child element and stopping the event propagation to the parent elements, you prevent SortableJS from receiving the event. This doesn't doesn't stop SortableJS from working in other browsers because they use pointerevents.

This is different for Safari though, because in Safari SortableJS uses mouseevents instead of the pointerevents. See this issue.