0

Sort tabs by drag and drop

asked 2015-11-18 14:30:43 +0800

MathieuPiette gravatar image MathieuPiette
1567 3

Hi,

I would like to be able to change the order of tabs by drag'n drop (just like you can reorder the tabs of your browser). However, drag and drop doesn't seem to work on tabs.

Here is a really simple example:

<window>
<tabbox>
    <tabs>
        <tab label="AAA" closable="true" draggable="true" droppable="true" onDrop="move(event.dragged)"/>
        <tab label="BBB" closable="true" draggable="true" droppable="true" onDrop="move(event.dragged)"/>
        <tab label="CCC" closable="true" draggable="true" droppable="true" onDrop="move(event.dragged)"/>
    </tabs>
    <tabpanels>
        <tabpanel>
            <vbox>
                <label>AAA</label>
            </vbox>
        </tabpanel>
        <tabpanel>
            <vbox>
                <label>BBB</label>
            </vbox>
        </tabpanel>
        <tabpanel>
            <vbox>
                <label>CCC</label>
            </vbox>
        </tabpanel>
    </tabpanels>
</tabbox>
<zscript>
    void move(Component dragged) {
        self.parent.insertBefore(dragged, self);
    }
</zscript>
</window>

I can drag a tab, but I can't drop it.

This code is a simplified version, in the real one I have a ViewModel, and the "onDrop" attribute of the tabs is like this:

onDrop="@command('drop')"

and in the ViewModel, I have this:

@Command
public void drop() {
    logger.info("dropped");
}

But the drop command is never called.

I am using ZK 8.0.0.

Thank you.

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2015-11-19 08:31:26 +0800

chillworld gravatar image chillworld flag of Belgium
5347 4 9
https://github.com/chillw...

Hey there.

This solution works :

<window>
    <tabbox>
        <tabs>
            <tab label="AAA" closable="true" draggable="true" droppable="true" onDrop="move(event)"/>
            <tab label="BBB" closable="true" draggable="true" droppable="true" onDrop="move(event)"/>
            <tab label="CCC" closable="true" draggable="true" droppable="true" onDrop="move(event)"/>
        </tabs>
        <tabpanels>
            <tabpanel>
                <vbox>
                    <label>AAA</label>
                </vbox>
            </tabpanel>
            <tabpanel>
                <vbox>
                    <label>BBB</label>
                </vbox>
            </tabpanel>
            <tabpanel>
                <vbox>
                    <label>CCC</label>
                </vbox>
            </tabpanel>
        </tabpanels>
    </tabbox>
    <zscript>
        void move(DropEvent event) {
        event.target.parent.insertBefore(event.dragged, event.target);
        }
    </zscript>
</window>

or if you want it in MVVM see this fiddle.

Greetz chill.

link publish delete flag offensive edit
0

answered 2015-11-20 14:49:49 +0800

MathieuPiette gravatar image MathieuPiette
1567 3

Thank you chillworld for your answer.

I tried the Fiddle you provided. However:

  • It seems to work in Chrome and Internet Explorer, but not in Firefox. I filed the bug report [ZK-2973].
  • The tabs themselves are reordered, but not the tabpanels. In my case I will update the model in the ViewModel (instead of having static elements like in the example), so I think I can make it work.

I could somewhat making it work (only in IE or Chrome) but my tabs are handled by the model/template mechanism of MVVM. When the model changes, the tabs bug, they are in the wrong order, their titles are incorrect and, sometimes, one or two tabs are missing. I filed an other bug [ZK-2976].

When the two bugs will be resolved, the example in [ZK-2976] can be seen as a working example.

link publish delete flag offensive edit

Comments

Yes and no, you have to search the corresponding tabpanel and move them also (same index as the tab, so you need the index of target component and index of drag component)

chillworld ( 2015-11-20 19:10:58 +0800 )edit
0

answered 2016-07-01 11:53:19 +0800

mis gravatar image mis
30 1

I have exactly the same problem on Firefox. Although if I start dragging, then change the focus to another window (Ctrl+Tab on Windows), switch the focus back to the browser the DnD is working.

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: 2015-11-18 14:30:43 +0800

Seen: 43 times

Last updated: Jul 01 '16

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