dragdrop.zul

非常接近C/S操作方式的Java Ajax框架－ZK 用ZK框架使你的B/S应用程序更漂亮更易操作。 官网：www.zkoss.org

<?xml version="1.0" encoding="UTF-8"?>

<!--
drapdrop.zul

{{IS_NOTE
	Purpose:
		
	Description:
		
	History:
		Sat Feb 25 18:01:15     2006, Created by tomyeh
}}IS_NOTE

Copyright (C) 2006 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<window>
<hbox>
	Drag around an item:
	<listbox id="src" multiple="true" width="200px">
		<listhead>
			<listheader label="Population"/>
			<listheader align="right" label="%"/>
		</listhead>
		<listitem value="A" draggable="true" droppable="true" onDrop="move(event.dragged)">
			<listcell label="A. Graduate"/>
			<listcell label="20%"/>
		</listitem>
		<listitem value="B" draggable="true" droppable="true" onDrop="move(event.dragged)">
			<listcell label="B. College"/>
			<listcell label="23%"/>
		</listitem>
		<listitem value="C" draggable="true" droppable="true" onDrop="move(event.dragged)">
			<listcell label="C. High School"/>
			<listcell label="40%"/>
		</listitem>
		<listfoot>
			<listfooter label="More or less"/>
			<listfooter label="100%"/>
		</listfoot>
		<listitem value="D" draggable="true" droppable="true" onDrop="move(event.dragged)">
			<listcell label="D. Others"/>
			<listcell label="17%"/>
		</listitem>
	</listbox>
	<zscript>
	void move(Component dragged) {
		if (dragged instanceof Listitem) {
			self.parent.insertBefore(dragged, self);
		} else {
			alert("Not an list item");
		}
	}
	</zscript>
</hbox>
	<image src="/img/coffee.gif" draggable="1"/>
	<image src="/img/cubfirs.gif" draggable="2"/>
	<label style="border: 1px solid blue" value="Type 1" droppable="1"/>
	<label style="border: 1px solid blue" value="Type 2" droppable="2"/>
</window>