Andreas Hocevar
264 lines
6.3 KiB
HTML
264 lines
6.3 KiB
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>
|