Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi there ,
I am facing an issue related to drag drop in list item I am unable to found this solution for reference demo1 and demo2 to implement the drog drop between two list box list item .But my requirement is to dragdrop between every list box list item .
my demo drag drop zul and vm:
<listbox model="@load(vm.haveList)" droppable="true"
onDrop="@command('dropToHaveList',item=event.dragged.attributes.item)"
hflex="1" vflex="1">
<listhead>
<listheader
tooltiptext="@load(vm.getText('ToolbarCustomizeDetail:LABEL_HAVE'))"
label="@load(vm.getText('ToolbarCustomizeDetail:LABEL_HAVE'))" />
</listhead>
<template name="model" var="tbaritem">
<listitem draggable="move" droppable="move"
label="@load(tbaritem.name)" tooltiptext="@load(tbaritem.name)"
attributes.item="@load(tbaritem)"
onDrop="@command('insertToHaveList',item=event.dragged.attributes.item, base=tbaritem)">
<listcell
image="@load(tbaritem.imageName)" />
</listitem>
</template>
</listbox>
java method here:
@Listen("onDrop = #lbox > #lHead > listheader")
@Command
@NotifyChange({ "haveList", "availableList" })
public void insertToHaveList(@BindingParam("base") ToolbarItem base, @BindingParam("item") ToolbarItem item, @ContextParam(ContextType.TRIGGER_EVENT)DropEvent ev) {
if (item != null && base != null && haveList.contains(base) && availableList.contains(item)) {
haveList.add(haveList.indexOf(base), item);
availableList.remove(item);
modified = true;
}
// get the dragged Listheader and the one it is dropped on.
Listitem dragged = (Listitem ) ev.getDragged();
Listitem droppedOn = (Listitem) ev.getTarget();
if(haveList.contains(dragged.getDraggable())){
haveList.add(haveList.indexOf(dragged), item);
availableList.remove(item);
modified = true;
}
// // then get their indexes.
// int from = lHead.getChildren().indexOf(dragged);
// int to = lHead.getChildren().indexOf(droppedOn);
//
// // swap the positions
// lHead.insertBefore(dragged, droppedOn);
//
// // swap related Listcell in all Listitem instances
// for (Listitem items : lbox.getItems()) {
// item.insertBefore(items.getChildren().get(from), items.getChildren().get(to));
// }
}
When i try to get the index:int from = lHead.getChildren().indexOf(dragged); // int to = lHead.getChildren().indexOf(droppedOn);
lHead getting null value in my vm. so anyone can help me please for this issue.
If you have any demo example please share.
Thanks
sitansu
zul code
<zk>
<window border="normal" title="hello"
apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('com.test.LoginViewModel')">
<zk>
<hlayout>
<listbox id="left" height="250px" width="200px"
onDrop="@command('doDrag',v=self)" droppable="true"
oddRowSclass="non-odd">
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png"
label="ZK Forge" />
</listitem>
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png"
label="ZK Mobile" />
</listitem>
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png"
label="ZK GWT" />
</listitem>
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png"
label="ZK JSF" />
</listitem>
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png"
label="ZK JSP" />
</listitem>
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png"
label="ZK Spring" />
</listitem>
</listbox>
<separator orient="vertical" spacing="8px" />
<listbox id="right" height="250px" width="200px"
onDrop="@command('doDrag',v=self)" droppable="true"
oddRowSclass="non-odd">
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png" label="ZK" />
</listitem>
<listitem draggable="true" droppable="true"
onDrop="@command('doDrag',v=self)">
<listcell
src="/widgets/effects/drag_n_drop/img/document.png"
label="ZK Studio" />
</listitem>
</listbox>
</hlayout>
</zk>
</window>
</zk>
java code
@Command
public void doDrag(@BindingParam("v") Listitem listitem,
@ContextParam(ContextType.TRIGGER_EVENT) DropEvent event) {
if (listitem instanceof Listitem) {
listitem.getParent().insertBefore(event.getDragged(), listitem);
} else {
if (listitem.getParent() instanceof Listbox) {
listitem.appendChild(event.getDragged());
}
}
}
Asked: 2014-06-05 09:13:32 +0800
Seen: 57 times
Last updated: Jun 05 '14