Untitled

<!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>