# Sort tabs by drag and drop

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 retag edit

Sort by » oldest newest most voted

chillworld
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.

MathieuPiette
1567 3

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.

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)

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

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.

[hide preview]