ZK dropEvent简单使用

前台(Drop.zul)

<?page title="拖动测试" contentType="text/html;charset=UTF-8"?>
<zk xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
        xmlns="http://www.zkoss.org/2005/zul" 
        xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul">
<window id="dropWin" title="Reorder by Drag-and-Drop" border="normal" apply="test.DropCtrl"> 
   Unique Visitors of ZK: 
   <listbox id="src" multiple="true" width="300px"> 
      <listhead> 
         <listheader label="Country/Area"/> 
         <listheader align="right" label="Visits"/> 
         <listheader align="right" label="%"/> 
      </listhead> 
      <listitem id="listItem1" draggable="true" droppable="true" onDrop="move(event.dragged)"> 
         <listcell label="United States"/> 
         <listcell label="5,093"/> 
         <listcell label="19.39%"/> 
      </listitem> 
      <listitem id="listItem2" draggable="true" droppable="true" onDrop="move(event.dragged)"> 
         <listcell label="China"/> 
         <listcell label="4,274"/> 
         <listcell label="16.27%"/> 
      </listitem> 
      <listitem id="listItem3" draggable="true" droppable="true" onDrop="move(event.dragged)"> 
         <listcell label="France"/> 
         <listcell label="1,892"/> 
         <listcell label="7.20%"/>
　　　　</listitem> 
      <listitem id="listItem4" draggable="true" droppable="true" onDrop="move(event.dragged)"> 
         <listcell label="Germany"/> 
         <listcell label="1,846"/> 
         <listcell label="7.03%"/> 
      </listitem> 
      <listfoot> 
         <listfooter label="Total 132"/> 
         <listfooter label="26,267"/> 
         <listfooter label="100.00%"/> 
      </listfoot> 
   </listbox> 
   <image id="image1" src="/images/02.png" draggable="true" />
   <div id="hlayout" height="200px" width="300px" droppable="true"
       style="border: 2px solid #ccc; overflow:scroll;background-color: white;"/>
       <menupopup id="editPopup">
        <menuitem label="启动" />
        <menuseparator />
        <menuitem label="重启" />
        <menuseparator />
        <menuitem label="连接"/>
    </menupopup>
   <zscript> 
   void move(Component dragged) { 
           <!-- self鼠标释放后所在位置的控件 -->
      self.parent.insertBefore(dragged, self); 
      <!-- alert(dragged.getId());
      alert(self.getId()); -->
   } 
   </zscript>
</window>
</zk>

后台(DropCtrl.java)

package test;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.DropEvent;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Div;
import org.zkoss.zul.Image;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.Menupopup;
import org.zkoss.zul.Window;

public class DropCtrl extends GenericForwardComposer<Component>{
    
    private Listitem listItem1;
    private Div hlayout;
    private Menupopup editPopup;
    private Window dropWin;
    
    @Override
    public void doAfterCompose(Component comp) throws Exception {
        // TODO Auto-generated method stub
        super.doAfterCompose(comp);
        
        listItem1 = (Listitem) dropWin.getFellow("listItem1");
        
        listItem1.addEventListener(Events.ON_DROP, new EventListener<Event>() {

            @Override
            public void onEvent(Event event) throws Exception {
                // TODO Auto-generated method stub
                DropEvent dropEvent = (DropEvent)event;
                System.out.println(dropEvent.getDragged().getId());
            }
        });
        
        hlayout.addEventListener(Events.ON_DROP, new EventListener<Event>() {

            @Override
            public void onEvent(Event event) throws Exception {
                // TODO Auto-generated method stub
                DropEvent dropEvent = (DropEvent)event;
                if (!dropEvent.getDragged().getId().equals("")) {

                    Image image =  new Image();
                    image.setSrc("/images/02.png");
                    
                    image.setDraggable("true");
                    image.setContext(editPopup);
                    //System.out.println(self.getId());//self指当前窗口
                    hlayout.insertBefore(image, hlayout);
                }
                
            }
        });
    }
}