search

kutlugsahin / smooth-dnd

drag and drop library for javascript
MIT License
611 stars 148 forks source link

Issue with button elements with nested content #25

Open nevf opened 6 years ago

nevf commented 6 years ago

With the following markup:

<button class="button-flat ui-tab-menu-dropdown" title="Tab menu">
    <span class="icon-ellipsis-vertical"></span>
</button>

and

dragHandleSelector:  '.ui-tab-menu-dropdown'

SmoothDnd doesn't work correctly on Chrome and Edge because the onMouseDown(event) fires for the <span> element not the <button>.

The drag appears to start, but the drag ghost image doesn't move, instead you get an image the Browser creates, which does move. When you release the button the ghost image drags and another click drops it. This is on Chrome.

image

This doesn't happen on Firefox because the mousedown event fires on the button. This is an old bug in Firefox and here.

I did try to add a fix to onMouseDown() but couldn't get it to work.