Add drag-select behavior to an element with a popup
New Tab New Window History Downloads Bookmarks Zoom Settings
Demo: A MenuButton uses PopupDragSelectMixin to support drag-selection like native OS menus do


Purpose: Add drag-select behavior to an element with a popup.

This lets a user mouse down on a popup source, drag into the resulting popup, and release the mouse to select something in the popup in a single mouse operation.

This mixin works in the beginning of the Elix render pipeline:

eventsmethods → setState → render DOM → post-render

Expects the component to provide:

  • popupList state member referencing the list-like element inside the popup.

Provides the component with:

  • dragSelect state member that is true if a drag-select operation is in progress.


import PopupSelectMixin from "elix/src/base/PopupSelectMixin.js";
import PopupSource from "elix/src/base/PopupSource.js";
class MyElement extends PopupSelectMixin(PopupSource) {}

This can be used in conjunction with PopupListMixin.