aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/draglistgroup.html
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/draglistgroup.html')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/draglistgroup.html247
1 files changed, 0 insertions, 247 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/draglistgroup.html b/contexts/data/lib/closure-library/closure/goog/demos/draglistgroup.html
deleted file mode 100644
index a041e6b..0000000
--- a/contexts/data/lib/closure-library/closure/goog/demos/draglistgroup.html
+++ /dev/null
@@ -1,247 +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.DragListGroup</title>
- <meta charset="utf-8">
- <script src="../base.js"></script>
- <script>
- goog.require('goog.dom');
- goog.require('goog.fx.DragListDirection');
- goog.require('goog.fx.DragListGroup');
- </script>
- <link rel="stylesheet" href="css/demo.css">
- <style>
- body {
- font-family: verdana, sans-serif;
- }
-
- .hr_clear {
- float: none;
- clear: both;
- height: 0px;
- padding: 10px 0px 0px 0px;
- border: 0px;
- margin: 0px;
- visibility: hidden;
- }
-
- .horiz1_class,
- .horiz3_class,
- .horiz5_class {
- padding: 8px 12px;
- /* box_height + 2 * (padding + border + margin) =
- 50 + 2 * (5 + 2 + 4) = 72px */
- height: 72px;
- border: 2px solid #000000;
- }
- .horiz1_class { float: left; }
- .horiz3_class { float: left; }
- .horiz5_class { float: left; }
-
- .horiz1_class div { float: left; }
- .horiz3_class div { float: right; }
- .horiz5_class div { float: left; }
-
- .horiz5_class {
- width: 288px;
- height: 216px;
- }
-
- .vert_table td {
- vertical-align: top;
- padding: 0px 20px;
- }
-
- .vert1_class,
- .vert2_class {
- padding: 12px 8px;
- /* box_width + 2 * (padding + border + margin) =
- 50 + 2 * (5 + 2 + 2) = 68px */
- width: 68px;
- border: 2px solid #000000;
- }
-
- div.red_box,
- div.yellow_box,
- div.blue_box,
- div.purple_box {
- width: 50px;
- height: 50px;
- padding: 5px;
- margin: 4px 2px;
- font-family: verdana, sans-serif;
- font-size: 36px;
- font-weight: bold;
- text-align: center;
- }
- div.red_box {
- border: 2px solid #CC0000;
- color: #CC0000;
- }
- div.yellow_box {
- border: 2px solid #CCCC00;
- color: #CCCC00;
- }
- div.blue_box {
- border: 2px solid #0000CC;
- color: #0000CC;
- }
- div.purple_box {
- border: 2px solid #993399;
- color: #993399;
- }
-
- #test {
- background-color: #CCFFCC;
- width: 100px;
- height: 100px;
- padding: 13px;
- border: 11px solid #339933;
- margin: 15px;
- }
-
- /* The following styles are used in the JS. */
-
- .cursor_pointer {
- cursor: pointer;
- }
-
- .cursor_move {
- cursor: move;
- -moz-user-select: none;
- }
-
- .opacity_40 {
- opacity: 0.4;
- -moz-opacity: 0.4;
- filter: alpha(opacity=40);
- }
-
- .drag_hover_class {
- border-color: #009900;
- background-color: #CCFFCC;
- }
- </style>
-</head>
-<body>
-
- <h1>goog.fx.DragListGroup</h1>
- <h2>You can drag any square into any of the first 6 lists.</h2>
- <hr class="hr_clear">
-
- <h4>Horizontal list 1 (grows right):</h4>
- <div id="horiz1_div" class="horiz1_class">
- <div class="red_box">1</div>
- <div class="red_box">2</div>
- <div class="red_box">3</div>
- <div class="red_box">4</div>
- </div>
- <hr class="hr_clear">
-
- <table class="vert_table">
- <tr>
-
- <td>
- <h4>Vertical list 1:</h4>
- <div id="vert1_div" class="vert1_class">
- <div class="blue_box">1</div>
- <div class="blue_box">2</div>
- <div class="blue_box">3</div>
- <div class="blue_box">4</div>
- </div>
- </td>
-
- <td>
- <h4>Vertical list 2 (style changes on drag hover):</h4>
- <div id="vert2_div" class="vert2_class">
- <div class="purple_box">1</div>
- <div class="purple_box">2</div>
- <div class="purple_box">3</div>
- <div class="purple_box">4</div>
- </div>
- </td>
-
- </tr>
- </table>
- <hr class="hr_clear">
- <h4>Horizontal list 3 (grows left):</h4>
- <p style="color:red;font-style:italic">Bug: drop position is off by one.</p>
- <div id="horiz3_div" class="horiz3_class">
- <div class="yellow_box">1</div>
- <div class="yellow_box">2</div>
- <div class="yellow_box">3</div>
- <div class="yellow_box">4</div>
- </div>
- <hr class="hr_clear">
-
- <h4>Horizontal list 5 (grows right, has multiple rows, hysteresis is enabled):</h4>
- <p style="color:red;font-style:italic">Bug: can't drop into the last row.</p>
- <div id="horiz5_div" class="horiz5_class">
- <div class="blue_box">11</div>
- <div class="blue_box">22</div>
- <div class="blue_box">33</div>
- <div class="blue_box">44</div>
- <div class="blue_box">55</div>
- <div class="blue_box">66</div>
- <div class="blue_box">77</div>
- <div class="blue_box">88</div>
- <div class="blue_box">99</div>
- </div>
- <hr class="hr_clear">
-
- <h4>The items in this list can be moved around with shift-dragging:</h4>
- <div id="horiz6_div" class="horiz1_class">
- <div class="red_box">1</div>
- <div class="red_box">2</div>
- <div class="red_box">3</div>
- <div class="red_box">4</div>
- </div>
- <hr class="hr_clear">
- <script>
-
- var dlg = new goog.fx.DragListGroup();
- dlg.setDragItemHoverClass('cursor_move');
- dlg.setDraggerElClass('cursor_move opacity_40');
-
- dlg.addDragList(goog.dom.getElement('horiz1_div'),
- goog.fx.DragListDirection.RIGHT);
- dlg.addDragList(goog.dom.getElement('horiz3_div'),
- goog.fx.DragListDirection.LEFT);
- dlg.addDragList(goog.dom.getElement('vert1_div'),
- goog.fx.DragListDirection.DOWN);
- dlg.addDragList(goog.dom.getElement('vert2_div'),
- goog.fx.DragListDirection.DOWN, true, 'drag_hover_class');
-
- dlg.init();
-
- var dlg2 = new goog.fx.DragListGroup();
- dlg2.setDragItemHoverClass('cursor_move');
- dlg2.setDraggerElClass('cursor_move opacity_40');
- dlg2.setCurrDragItemClass('opacity_40');
- dlg2.setIsCurrDragItemAlwaysDisplayed();
- dlg2.addDragList(goog.dom.getElement('horiz5_div'),
- goog.fx.DragListDirection.RIGHT_2D);
- dlg2.setHysteresis(5);
- dlg2.init();
-
- var dlg3 = new goog.fx.DragListGroup();
- dlg3.setDragItemHoverClass('cursor_move');
- dlg3.setDraggerElClass('cursor_move opacity_40');
- dlg3.addDragList(goog.dom.getElement('horiz6_div'),
- goog.fx.DragListDirection.RIGHT);
- goog.events.listen(dlg3, goog.fx.DragListGroup.EventType.BEFOREDRAGSTART,
- function(e) {
- if (!e.event.shiftKey) {
- e.preventDefault();
- }
- });
- dlg3.init();
- </script>
-</body>
-</html>