<?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>

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

                }

            }

        });

    }

}