Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Notepad</title>
- <link rel="stylesheet" href="closure-library/closure/goog/css/roundedtab.css">
- <link rel="stylesheet" href="tabpane.css">
- <script src="closure-library/closure/goog/base.js"></script>
- <script>
- goog.require('goog.dom');
- goog.require('goog.fx.DragDrop');
- goog.require('goog.fx.DragListDirection');
- goog.require('goog.fx.DragListGroup');
- goog.require('goog.fx.DragScrollSupport');
- goog.require('goog.ui.TabPane');
- </script>
- <!-- script src="main.js"></script> -->
- </head>
- <body>
- <div id="tabpane1" height="100%"></div>
- <div id="page1">
- <div id="vert1_div" class="vert1_class">
- <div class="blue_box">1</div>
- <div class="blue_box">2</div>
- <div class="blue_box">3</div>
- <div class="blue_box">4</div>
- </div>
- </div>
- <div id="page2">
- <div id="vert2_div" class="vert2_class">
- <div class="purple_box">1</div>
- <div class="purple_box">2</div>
- <div class="purple_box">3</div>
- <div class="purple_box">4</div>
- </div>
- </div>
- <script>
- var scrollSupport = null;
- var tabPane = new goog.ui.TabPane(document.getElementById('tabpane1'));
- var tabPage1 = new goog.ui.TabPane.TabPage(document.getElementById('page1'), 'Page 1');
- var tabPage2 = new goog.ui.TabPane.TabPage(document.getElementById('page2'), 'Page 2');
- tabPane.addPage(tabPage1);
- tabPane.addPage(tabPage2);
- var dlg = new goog.fx.DragListGroup();
- dlg.setDragItemHoverClass('cursor_move');
- dlg.setDraggerElClass('cursor_move opacity_40');
- dlg.addDragList(goog.dom.getElement('vert1_div'),
- goog.fx.DragListDirection.DOWN);
- dlg.addDragList(goog.dom.getElement('vert2_div'),
- goog.fx.DragListDirection.DOWN, true, 'drag_hover_class');
- dlg.init();
- var dropPage1 = new goog.fx.DragDrop(tabPage1.getTitleElement());
- var dropPage2 = new goog.fx.DragDrop(tabPage2.getTitleElement());
- // Set up event handlers
- goog.events.listen(dlg, 'dragstart', dragStart);
- goog.events.listen(dlg, 'dragend', dragEnd);
- //this is not working as the DragDrop Elements are not valid targets
- goog.events.listen(dropPage1, 'dragover', dragEnter);
- goog.events.listen(dropPage2, 'dragover', dragEnter);
- function dragStart(event) {
- console.log("Attaching ScrollThingy");
- scrollSupport = new goog.fx.DragScrollSupport(
- goog.dom.getElementByClass('goog-tabpane-cont'));
- }
- function dragEnd(event) {
- console.log("Detaching ScrollThingy");
- goog.dispose(scrollSupport);
- }
- function dragEnter(event){
- console.log("UIUIUIUIUIU");
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement