ZK MVVM dual list drag-drop example

drag.zul.xml

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('org.zkoss.mvvm.examples.duallistbox.DragVM')">
	
	<hlayout>
		<vlayout>
			List1
			<listbox model="@bind(vm.list1)" width="300px" height="300px" droppable="true"
			onDrop="@command('dropToList1',item=event.dragged.attributes.item)">
				<template name="model">
					<listitem draggable="true" droppable="true"
					label="@load(each.name)" attributes.item="@load(each)"
					onDrop="@command('insertToList1',item=event.dragged.attributes.item, base=each)"/>
				</template>
			</listbox>
		</vlayout>
		<vbox vflex="1" pack="middle" width="100px">
			
		</vbox>
		<vlayout>
			List2
			<listbox model="@bind(vm.list2)" width="300px" height="300px" droppable="true"
			onDrop="@command('dropToList2',item=event.dragged.attributes.item)">
				<template name="model">
					<listitem draggable="true" droppable="true" 
					label="@load(each.name)" attributes.item="@load(each)"
					onDrop="@command('insertToList2',item=event.dragged.attributes.item, base=each)"/>
				</template>
			</listbox>
		</vlayout>
	</hlayout>
</window>

DragVM.java

package org.zkoss.mvvm.examples.duallistbox;

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.NotifyChange;

public class DragVM {

	List<Item> list1;
	List<Item> list2;
	
	public DragVM(){
		list1 = new ArrayList<Item>();
		list2 = new ArrayList<Item>();
		for (int i=0;i<10;i++){
			list1.add(new Item("Item "+i));
		}
	}


	public List<Item> getList1() {
		return list1;
	}
	public List<Item> getList2() {
		return list2;
	}
	
	@Command
	@NotifyChange({"list1","list2"})
	public void dropToList1(@BindingParam("item") Item item){
		if(item!=null){
			list1.add(item);
			list2.remove(item);
		}
	}
	
	@Command
	@NotifyChange({"list1","list2"})
	public void dropToList2(@BindingParam("item") Item item){
		if(item!=null){
			list2.add(item);
			list1.remove(item);
		}
	}
	
	@Command
	@NotifyChange({"list1","list2"})
	public void insertToList1(@BindingParam("base") Item base,@BindingParam("item") Item item){
		if(item!=null && base!=null && list1.contains(base) && list2.contains(item)){
			list1.add(list1.indexOf(base),item);
			list2.remove(item);
		}
	}
	
	@Command
	@NotifyChange({"list1","list2"})
	public void insertToList2(@BindingParam("base") Item base,@BindingParam("item") Item item){
		if(item!=null && base!=null && list2.contains(base) && list1.contains(item)){
			list2.add(list2.indexOf(base),item);
			list1.remove(item);
		}
	}
	
	static public class Item{
		String name;
		public Item(String name){
			this.name = name;
		}
		public String getName() {
			return name;
		}
		public void setName(String name) {
			this.name = name;
		}
	}
	
	
}

Thanks for the code. Its was helpful as I was trying to do a similar thing. However, there are 2 issues.

Firs is that you cannot drag and drop in the same list. And the second is that if you drag, again in the same list, and drop the element after the last item of the same list, the item gets duplicated. Anyhow I fixed it on my own project. Its an easy few lines extra. Let me know if you are interested.
cheers

esfandiar-amirrahimi please fork this gist and provide your enhancements as I would like to know them.

really sorry for delay. I forked and made some small changes which could be an improvement.