diff options
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.html | 263 |
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> |