Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ZK MVVM dual list drag-drop example
<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>
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;
}
}
}
@esfand-r

This comment has been minimized.

Copy link

@esfand-r esfand-r commented Dec 23, 2012

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

@simbo1905

This comment has been minimized.

Copy link

@simbo1905 simbo1905 commented Dec 27, 2012

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

@esfand-r

This comment has been minimized.

Copy link

@esfand-r esfand-r commented Jan 9, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment