拖拽组件事例

1,页面元素

 

 

<window id="dropDemoWin" apply="controller.DropDemoController">
 <listbox>
   <listitem id="draged1111111111" draggable="true" droppable="true" onDrop="dropDemoWin$composer.onDropListitem(event)">
 </listbox>
</window>

 如果不知道dropDemoWin$composer怎么来的看这里【zk开发】如何在页面中获得composer对象

 

 

2,将拖放的组件添加进来 onDropListitem

 

 

public class DropDemoController extends GenericAutowireComposer {

     public void onDropListitem(DropEvent event) {
		if (!(event.getDragged() instanceof Listitem)) {
			// ZkUtils.showError("some errors");
			return;
		}
		// event.getDragged()获得你托动过来的组件
		Listitem draggedListitem = (Listitem) event.getDragged();
		// event.getTarget()是你释放鼠标,鼠标下的那个组件,即draggedListitem将要放在那个组件上,或下
		Listitem targetListitem = (Listitem) event.getTarget();
//		//放在目标组件之前
//		targetListitem.getParent()
//				.insertBefore(draggedListitem, targetListitem);
		//当然你也可以放在目标组件之后
		//
		Component afterComp=targetListitem.getNextSibling();
		//后一个组件是托过来的组件,什么都不做
		if(afterComp ==draggedListitem){
			return;
		}
		if(afterComp==null){//如果没有下一个组件说明target是最后一个,直接添加到listbox里
			draggedListitem.detach();
			draggedListitem.setParent(targetListitem.getParent());
		}else{//注意这里的insertBefore的第二个参数
			targetListitem.getParent().insertBefore(draggedListitem, afterComp);
		}
		
	}

}

你可能感兴趣的:(Ajax,zk,web前端,zk视频教程,zk例子)