Normal This is my tests code:
<zk> <zscript> public void droppedOnTabs(Event event) { DropEvent dropEvent = (DropEvent)event; Tab tab = (Tab)dropEvent.getDragged(); Tabs tabs = tab.getParent(); tabs.removeChild(tab); tabs.appendChild(tab); tab.setSelected(true); } public void droppedOnTab(Event event) { DropEvent dropEvent = (DropEvent)event; Tab tab = (Tab)dropEvent.getDragged(); Tab destination = (Tab)event.getTarget(); Tabs tabs = tab.getParent(); tabs.removeChild(tab); tabs.insertBefore(tab, destination); tab.setSelected(true); } </zscript> <tabbox> <tabs droppable="true" onDrop="droppedOnTabs(event)"> <tab label="first" draggable="true" droppable="true" onDrop="droppedOnTab(event)"/> <tab label="second" draggable="true" droppable="true" onDrop="droppedOnTab(event)"/> <tab label="third" draggable="true" droppable="true" onDrop="droppedOnTab(event)"/> <tab label="fourth" draggable="true" droppable="true" onDrop="droppedOnTab(event)"/> </tabs> </tabbox> </zk>
The code works fine except when you dragg the selected tab. In that specific case, when you drag the selected tab and drop it, no tab will be shown as selected.
You can try to drop it on a different tab, or on the Tabs component.
I think this is bug, now some ideas for improvement:
-------------------------------------------------------------------------------------------
First: The look and feel of the draggin ghost is strange, mainly because of a black dot that goes around.
Second: When you drop a tab onto a different tab, you don't know if it will be dropped on the left or on the right. If you try to drag and drop
firefox tabs, you'll see a very usefull arrow which tells where the dropped tab will go to.