|
Processing... Drag and drop an item in its own containing listbox or to a neighboring listbox!
Description & Source Code
All ZK components can be made draggable and/or droppable. drag_n_drop.zul
<zk> <hlayout> <listbox id="left" height="250px" width="200px" onDrop="move(event.dragged)" droppable="true" oddRowSclass="non-odd"> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK Forge" /> </listitem> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK Mobile" /> </listitem> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK GWT" /> </listitem> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK JSF" /> </listitem> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK JSP" /> </listitem> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK Spring" /> </listitem> </listbox> <separator orient="vertical" spacing="8px" /> <listbox id="right" height="250px" width="200px" onDrop="move(event.dragged)" droppable="true" oddRowSclass="non-odd"> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK" /> </listitem> <listitem draggable="true" droppable="true" onDrop="move(event.dragged)"> <listcell image="/widgets/effects/drag_n_drop/img/document.png" label="ZK Studio" /> </listitem> </listbox> </hlayout> <zscript><![CDATA[ void move(Component dragged) { if (self instanceof Listitem) { self.parent.insertBefore(dragged, self); } else { self.appendChild(dragged); } } ]]></zscript> </zk>
Copyright © 2005-2024 Potix Corporation All rights reserved.
|
Processing... |