<!DOCTYPE html>
<html>
<!--
Copyright 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');
goog.require('goog.dom.TagName');
</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(goog.dom.TagName.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>
Codebase Browser
chromium