Button handle not working in Egde

[piernik]

handle with button element is not working in Edge. handle with div is working.

Here is gif. Div and button have class sorting-handle. I'm using sortable with angular and posted it there originally (SortableJS/ngx-sortablejs#156), but it is Your issue.

[owen-m1]

@piernik SortableJS will ignore the drag if the mouse is clicking on a button. Why would you want the handle to be a button anyways? If it is only for the animation, you can just set the handle to a different element and add some CSS to the handle's :active state.

[piernik]

@owen-m1 that's wierd :) it's working on opera, chrome and firefox. Not on edge. And button is a clickable element, so users know it and use it.
But I'll try Your solution if I don't have other way.

[owen-m1]

@piernik Looking at the code again, I was wrong, it should be working if the handle is a button. Could you provide a JSBin so I can test this please?

[piernik]

I think it's very easy to recreate. Have You some kind of boilerplate?

[owen-m1]

@piernik Sortable is setting draggable to true on the parent element, so it must be an issue with Edge.
To get around it: set forceFallback: true in the options.

[piernik]

@owen-m1 will You fix it in future release?

[owen-m1]

@piernik If I figure out a workaround I will add it, but as I said, it is an issue with the Edge browser.

[ufku]

@owen-m1 You may also want to check this example with Firefox.
https://jsbin.com/xeqowucuho/edit?html,css,js,output

Firefox does not drag if you start dragging from an empty area of a button. You must start from the text. Buttons with no html content(with css content) can never be dragged.

Related bug https://bugzilla.mozilla.org/show_bug.cgi?id=568313