Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,263 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user