Andreas Hocevar
134 lines
3.1 KiB
HTML
134 lines
3.1 KiB
HTML
<!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>
|