search

gridstack / gridstack.js

Build interactive dashboards in minutes.
https://gridstackjs.com
MIT License
6.3k stars 1.26k forks source link

Custom handles with icons cannot be dragged #2703

Open CharlieWinkwaves opened 3 weeks ago

CharlieWinkwaves commented 3 weeks ago

Subject of the issue

When using a custom handle and the handle contains an icon the item can only be dragged when the user grabs the button. If the icon is grabbed the item cannot be dragged

Your environment

gridstack 10.2.0 Mac, Chrome v125.0.6422.144 Also reproduced on a linux system with chromium as browser

Steps to reproduce

https://jsfiddle.net/m3Lqx4ka/4/

Expected behavior

I expect the icon to also be used to grab as it is part of the button. It does work when using text inside the button. So why not icons

I added a screenshot of our handle with the icon inside.

Screenshot 2024-06-18 at 11 28 28
adumesny commented 3 weeks ago

simpler case https://jsfiddle.net/adumesny/c1o3xs6w

marciocamello commented 2 weeks ago

change to div, element, maybe by default only accept HTMLDivElement, use div tag and inside put your icon, button, etc.

https://jsfiddle.net/fvrj23t6/

CharlieWinkwaves commented 2 weeks ago

@marciocamello it does accept button as a handle see https://github.com/gridstack/gridstack.js/issues/2677 but it does not include the icon as a handle so only the edges of the button can be used to drag and for accessibility reasons we want to use a button not a div.

marciocamello commented 2 weeks ago

@marciocamello it does accept button as a handle see #2677 but it does not include the icon as a handle so only the edges of the button can be used to drag and for accessibility reasons we want to use a button not a div.

Button yet, I know, but some users try use only a icon, or other tags, like and don't works with these tags, but I believe you can change to accept any element for usage in react for example, it's a good approach remove this limitation.