ice:panelGroup (drag&drop) - Overview

Drag and drop functionality is very useful for unique use cases in rich web applications. Instead of traditional web methods of add/remove buttons, drag and drop can be used instead. Implementing drag and drop is simple for a developers as they can customize what happens during the drag and drop by using provided listeners. Coupling drag and drop with the effect component is an elegant way to help users understand what is going on, as shown here with the orange highlight when an item is hovered over the cart.

In the example below:

  • » Click and drag an item from the top list into the white shopping cart area below. This will populate the data table of current items, which simulates a user purchasing something from an online store.
  • » Click the "Return" button on an item to move it back into the "store" stock.
Laptop
Laptop
$2,492.79
14
Monitor
Monitor
$593.67
6
Desktop
Desktop
$365.24
119
PDA
PDA
$190.64
23

Shopping Cart
ID Name Unit Price Quantity Manage
$0.00
Source Code