Desktop Components ShowcaseMobile Components Showcase
ace:draggable/droppable - Overview

The ace library supports drag and drop operation through its <ace:draggable> and <ace:droppable> components. When embedded within other components (i.e. panels, menus etc.) the components will become draggable and droppable. Both elements support a wide range of features that allow developers to constrain drag behaviors and drop regions as well as controlling appearance etc. In the demo below select and hold the images of objects in the list on the left with the left mouse button. Drag them over an available box on the right. Note that this particular example demonstrates a restriction on the drop region in that only certain elements can be dropped in certain regions (i.e. electronic elements can only be dropped into electronic labeled boxes). Also note that in this example the object must be 100% inside the box before dropping is allowed.

Sort us please
Laptop
Laptop
Monitor
Monitor
Aubergine
Aubergine
Capsicum
Capsicum
false null [0]
Electronics
Groceries
Source Code