| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 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> |
