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

            }
        });
    }
}