accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
134 lines (120 loc) • 3.19 kB
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>