aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/dragdrop.html
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/dragdrop.html')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/dragdrop.html263
1 files changed, 0 insertions, 263 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/dragdrop.html b/contexts/data/lib/closure-library/closure/goog/demos/dragdrop.html
deleted file mode 100644
index 725c8f1..0000000
--- a/contexts/data/lib/closure-library/closure/goog/demos/dragdrop.html
+++ /dev/null
@@ -1,263 +0,0 @@
-<!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.DragDrop</title>
- <meta charset="utf-8">
- <script src="../base.js"></script>
- <script>
- goog.require('goog.fx.DragDrop');
- goog.require('goog.fx.DragDropGroup');
- 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.DragDrop</h1>
-
-List 1 (combined source/target, can be dropped on list 1, list 2, button 1 or
-button 2).
-<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>
-
-List 2 (source only, can be dropped on list 1 or button 2)
-<ul id="list2">
- <li>Item 2.1</li>
- <li>Item 2.2</li>
- <li>Item 2.3</li>
- <li>Item 2.4</li>
- <li>Item 2.5</li>
- <li>Item 2.6</li>
- <li>Item 2.7</li>
- <li>Item 2.8</li>
- <li>Item 2.9</li>
- <li>Item 2.10</li>
- <li>Item 2.11</li>
- <li>Item 2.12</li>
- <li>Item 2.13</li>
- <li>Item 2.14</li>
- <li>Item 2.15</li>
-</ul>
-
-<div id="button1">
- Button 1 (combined source/target, can be dropped on list 1)
-</div>
-
-<div id="button2">
- Button 2 (target only)
-</div>
-
-
-<script>
- // Custom implementation demo. Overrides createDragElement and
- // positionDragElement.
- function FooDrag(element, opt_data) {
- goog.fx.DragDrop.call(this, element, opt_data);
- }
- goog.inherits(FooDrag, goog.fx.DragDrop);
-
- FooDrag.prototype.createDragElement = function(sourceEl) {
- return goog.dom.createDom('div', 'foo', 'Custom drag element');
- };
-
- FooDrag.prototype.getDragElementPosition = function(sourceEl, el, event) {
- return new goog.math.Coordinate(event.clientX, event.clientY);
- };
-
-
- var button1, button2, list1, list2, i, len, nodes, el;
-
- // Create drop targets (either by id or element reference)
- button1 = new FooDrag(
- document.getElementById('button1'), 'button 1'
- );
- button2 = new goog.fx.DragDrop('button2', 'button 2');
-
- // Create drag clusters (multiple elements shares the same
- // drag properties)
- list1 = new goog.fx.DragDropGroup();
- list2 = new goog.fx.DragDropGroup();
-
- nodes = document.getElementById('list1').childNodes;
- len = nodes.length;
- for (i = 0; i < len; i++) {
- el = nodes[i];
- if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
- list1.addItem(el, el.firstChild.nodeValue);
- }
- }
-
- nodes = document.getElementById('list2').childNodes;
- len = nodes.length;
- for (i = 0; i < len; i++) {
- el = nodes[i];
- if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
- list2.addItem(el, el.firstChild.nodeValue);
- }
- }
-
- // Set valid targets for list1
- list1.addTarget(button1);
- list1.addTarget(button2);
- list1.addTarget(list1);
-
- // Set valid targets for list2
- list2.addTarget(button2);
- list2.addTarget(list1);
-
- // Set valid target for button1 (allow button1 to be dragged onto list1)
- button1.addTarget(list1);
-
- // Set additional classes used to indicate dragging
- button1.setSourceClass('source');
- button1.setTargetClass('target');
- button1.setDragClass('drag');
- button2.setSourceClass('source');
- button2.setTargetClass('target');
- list1.setSourceClass('source');
- list1.setTargetClass('target');
- list2.setSourceClass('source');
-
- // Init drag objects
- button1.init();
- button2.init();
- list1.init();
- list2.init();
-
- // Set up event handlers
- goog.events.listen(list1, 'dragover', dragOver);
- goog.events.listen(list1, 'dragout', dragOut);
- goog.events.listen(list1, 'drop', dropList1);
- goog.events.listen(list1, 'drag', dragList1);
- goog.events.listen(list1, 'dragstart', dragStart);
- goog.events.listen(list1, 'dragend', dragEnd);
-
- goog.events.listen(list2, 'dragover', dragOver);
- goog.events.listen(list2, 'dragout', dragOut);
- goog.events.listen(list2, 'drop', drop);
- goog.events.listen(list2, 'dragstart', dragStart);
- goog.events.listen(list2, 'dragend', dragEnd);
-
- goog.events.listen(button1, 'dragover', dragOver);
- goog.events.listen(button1, 'dragout', dragOut);
- goog.events.listen(button1, 'drop', drop);
- goog.events.listen(button1, 'dragstart', dragStart);
- goog.events.listen(button1, 'dragend', dragEnd);
-
- goog.events.listen(button2, 'dragover', dragOver);
- goog.events.listen(button2, 'dragout', dragOut);
- goog.events.listen(button2, 'drop', drop);
-
- goog.events.listen(document.getElementById('button1'), 'click',
- function(e) { alert('click'); });
-
- function dragOver(event) {
- event.dropTargetItem.element.style.background = 'red';
- }
-
- function dragOut(event) {
- event.dropTargetItem.element.style.background = 'silver';
- }
-
- function drop(event) {
- event.dropTargetItem.element.style.background = 'silver';
- var str = [
- event.dragSourceItem.data,
- ' dropped onto ',
- event.dropTargetItem.data,
- ' at ',
- event.viewportX,
- 'x',
- event.viewportY
- ];
- alert(str.join(''));
- }
-
- function dropList1(event) {
- event.dropTargetItem.element.style.background = 'silver';
- var str = [
- event.dragSourceItem.data,
- ' dropped onto ',
- event.dropTargetItem.data,
- ' in list 1.'
- ];
- alert(str.join(''));
- }
-
- function dragList1(event) {
- var str = [
- event.dragSourceItem.data,
- ' dragged from list 1'
- ];
- alert(str.join(''));
- }
-
- function dragStart(event) {
- goog.style.setOpacity(event.dragSourceItem.element, 0.5);
- }
-
- function dragEnd(event) {
- goog.style.setOpacity(event.dragSourceItem.element, 1.0);
- }
-</script>
-</body>
-</html>