dragscrollsupport.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.fx.DragScrollSupport</title>
  <meta charset="utf-8">
  <script src="../base.js"></script>
  <script>
    goog.require('goog.fx.DragDrop');
    goog.require('goog.fx.DragDropGroup');
    goog.require('goog.fx.DragScrollSupport');
    goog.require('goog.dom');
  </script>
  <link rel="stylesheet" href="css/demo.css">
  <style>
    body {
      margin: 10px;
    }
    ul {
      padding: 0px;
    }
    li {
      list-style: none;
    }
    li, div {
      font: menu;
      width: 20ex;
      border: 1px solid gray;
      margin: 1px;
      padding: 0px 2px 0px 2px;
      background: silver;
    }
    .source {
      cursor: move;
      -moz-user-select: none;
    }
    .drag {
      cursor: move;
      background: green;
     }
    .target {

    }
    #list2 {
      margin: 0px 30px 30px 30px;
      padding-left: 30px;
    }
    .foo {
      position: absolute;
      background: pink;
      padding: 5px;
    }
  </style>
</head>
<body>
<h1>goog.fx.DragScrollSupport</h1>

List 1 in a scrollable area.
<div id="list1-container" style="overflow:scroll; width: 100px; height: 300px;">
<ul id="list1">
  <li>Item 1.1 ----------</li>
  <li>Item 1.2 ----------</li>
  <li>Item 1.3 ----------</li>
  <li>Item 1.4 ----------</li>
  <li>Item 1.5 ----------</li>
  <li>Item 1.6 ----------</li>
  <li>Item 1.7 ----------</li>
  <li>Item 1.8 ----------</li>
  <li>Item 1.9 ----------</li>
  <li>Item 1.10 ----------</li>
  <li>Item 1.11 ----------</li>
  <li>Item 1.12 ----------</li>
  <li>Item 1.13 ----------</li>
  <li>Item 1.14 ----------</li>
  <li>Item 1.15 ----------</li>
</ul>
</div>

<script>
  var scrollSupport = null;
  var list1 = new goog.fx.DragDropGroup();

  var nodes = document.getElementById('list1').childNodes;
  var len = nodes.length;
  for (var i = 0; i < len; i++) {
    var el = nodes[i];
    if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
      list1.addItem(el, el.firstChild.nodeValue);
    }
  }

  list1.addScrollableContainer(goog.dom.getElement('list1-container'));
  list1.addTarget(list1);

  // Set additional classes used to indicate dragging
  list1.setSourceClass('source');
  list1.setTargetClass('target');

  // Init drag objects
  list1.init();

  // Set up event handlers
  goog.events.listen(list1, 'dragover', dragOver);
  goog.events.listen(list1, 'dragout', dragOut);
  goog.events.listen(list1, 'dragstart', dragStart);
  goog.events.listen(list1, 'dragend', dragEnd);

  function dragOver(event) {
    event.dropTargetItem.element.style.background = 'red';
  }

  function dragOut(event) {
    event.dropTargetItem.element.style.background = 'silver';
  }

  function dragStart(event) {
    goog.style.setOpacity(event.dragSourceItem.element, 0.5);
    scrollSupport = new goog.fx.DragScrollSupport(
       goog.dom.getElement('list1-container'));
  }

  function dragEnd(event) {
    goog.style.setOpacity(event.dragSourceItem.element, 1.0);
    goog.dispose(scrollSupport);
  }
</script>
</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/dragscrollsupport.html
