Vigyata.AI
Is this your channel?

Drag And Drop - Home Assistant Lovelace

3.6K views· 48 likes· 73:11· Oct 8, 2020

🛍️ Products Mentioned (1)

Work on Developing a core view for Lovelace that will enable Dragging and Droping of cards Sponsor me: https://github.com/sponsors/zsarnett

About This Video

In this stream I’m continuing the work on a core Lovelace view that enables real drag-and-drop editing for cards. Since the last time, I changed the overlay behavior and added a resize control, then started tightening up the basic UX: making sure cards can’t be resized down to something ridiculous, thinking in “units” (I’m using 15px as the base), and adding min/max constraints so the layout stays sane. I also tweaked the hover/edit controls so you can drag and edit via icons, and I fixed a flex-wrap issue so the action icons don’t blow out of the container. A big chunk of the video is me wrestling with what the “right” interaction should be—especially on mobile. Dragging works on mobile in my lit grid layout demo, but moving and resizing in a tight viewport gets messy fast, so I’m debating an MVP that disables move/resize under a certain width. I also go back and forth on whether a dedicated resize handle is worth the complexity versus just making the whole card the handle in edit mode (spoiler: the handle adds a lot of pain with layering/z-index and hover). Finally, I talk through the harder problem: where to store per-card layout settings so it works for core and custom cards, survives refresh, and doesn’t turn the UI editor into a foot-gun.

Frequently Asked Questions

🎬 More from Zack Barett