0

Drag drop in list item in zk

asked 2014-06-05 09:13:32 +0800

sitansu gravatar image sitansu
2254 13
http://java91.blogspot.in...

updated 2014-06-05 10:28:06 +0800

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

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

answered 2014-06-05 11:34:10 +0800

hswain gravatar image hswain flag of India
1763 3 10
http://corejavaexample.bl...

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());
                }
            }
        }
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-06-05 09:13:32 +0800

Seen: 54 times

Last updated: Jun 05 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More