src/third_party/closure_library/closure/goog/demos/dragdrop.html - incubator-pagespeed-debian - Git at Google

 <!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>
	<!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>