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:
Tags
People
Badges
Help
<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.
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.
Thank you chillworld for your answer.
I tried the Fiddle you provided. However:
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)
chillworld ( 2015-11-20 19:10:58 +0800 )editAsked: 2015-11-18 14:30:43 +0800
Seen: 44 times
Last updated: Jul 01 '16
