拖拽组件例子 _Web前端

拖拽组件事例

1,页面元素

Xml代码 ?

< 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

Java代码 ?

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);??
????????}??
??????????
????}??
??
}?