JavaScript DHTML/Rico/Drag Drop
Содержание
Rico Drag-and-Drop: LiveGrids
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rico Drag-n-Drop Grids</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("LiveGrid","LiveGridMenu","DragAndDrop","greenHdg.css");
var names = [ ["Holloman", "Debbie"],
["Barnes", "Pat"],
["Dampier", "Joan"],
["Alvarez", "Randy"],
["Neil", "William"],
["Hardoway", "Kimber"],
["Story", "Leslie"],
["Lott", "Charlie"],
["Patton", "Sabrina"],
["Lopez", "Juan" ] ];
var grid_ids=["nameList","nameListDeleted","dropZone1","dropZone2"]
var CustomDraggable, logger, grid=[], buffer=[];
Rico.onLoad( function() {
logger=$("logger");
logger.value="";
// initialize all 4 grids with the same options
var opts = {
useUnformattedColWidth: false,
visibleRows : "parent",
columnSpecs : [{Hdg:"Last Name", canDrag:true},
{Hdg:"First Name", canDrag:true}]
};
for (var i=0; i<4; i++) {
buffer[i]=new Rico.Buffer.Base();
grid[i]=new Rico.LiveGrid (grid_ids[i], buffer[i], opts);
}
// load data into the first grid
buffer[0].loadRowsFromArray(names);
buffer[0].fetch(0);
// initialize the drop zones (the other 3 grids)
var CustomDropzone = Class.create();
CustomDropzone.prototype = Object.extend(new Rico.Dropzone(), CustomDropzoneMethods);
dndMgr.registerDropZone( new CustomDropzone(grid[1]));
dndMgr.registerDropZone( new CustomDropzone(grid[2]));
dndMgr.registerDropZone( new CustomDropzone(grid[3]));
});
var CustomDropzoneMethods = {
initialize: function( grid ) {
this.liveGrid = grid;
this.htmlElement = grid.outerDiv;
this.absoluteRect = null;
},
accept: function(draggableObjects) {
for ( var i = 0 ; i < draggableObjects.length ; i++ ) {
// copy data from drag grid buffer to drop grid buffer
var srcGrid = draggableObjects[i].liveGrid;
if (srcGrid==this.liveGrid) continue;
var srcRow = srcGrid.buffer.bufferRow(draggableObjects[i].dragRow);
var newRows = this.liveGrid.buffer.appendRows(1);
for (var c=0; c < srcGrid.columns.length; c++)
newRows[0][c]=srcGrid.buffer.getValue(srcRow,c)
logger.value+="CustomDropzone.accept: " + draggableObjects[i].htmlElement.innerHTML + " from [" + srcGrid.tableId +"] to [" + this.liveGrid.tableId +"]\n";
// refresh drop grid
this.liveGrid.buffer.fetch(0);
this.liveGrid.scrollToRow(this.liveGrid.buffer.size-1); // scroll to the end
// remove item from drag grid
srcGrid.buffer.deleteRows(srcRow);
srcGrid.buffer.fetch(Math.min(srcGrid.lastRowPos || 0, srcGrid.topOfLastPage()-1));
}
}
}
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.logBox {
background-color : #ffffee;
border : 1px solid #888;
font-size : 8pt;
}
.zone {
padding: 0px;
width:250px;
height:150px;
overflow:hidden;
margin-left:8px;
margin-bottom:8px;
float:left;
position: relative;
}
.catHeader {
font-family : Arial;
font-weight : bold;
font-size : 11px;
color : #5b5b5b;
margin-left : 8px;
margin-top : 12px;
margin-bottom: 0px;
display : block;
}
.LiveGridDraggable {
background-color : #E0DDB5;
color : #5b5b5b;
border : 1px solid #5b5b5b;
filter : alpha(Opacity=70);
opacity : 0.7;
-moz-opacity : 0.7;
padding : 1px 5px 1px 5px;
font-size : 11px;
}
div.ricoLG_outerDiv {
border: 1px solid #888;
background-color:#FFF;
}
#exampleContainer {
float:left;
background-color:#DDD;
}
</style>
</head>
<body>
<h1>Rico Drag-and-Drop: LiveGrids</h1>
<p>This example demonstrates how to enable drag-and-drop actions between LiveGrids.
Drag either a first or last name from the upper left grid to any of the other 3 grids.
Log messages demonstrate that the items can be tracked.</p>
<div id="exampleContainer">
<div>
<div id="dragBox" class="zone">
<p class="catHeader"><span id="nameList_bookmark"> </span></p>
<div id="nameList"></div>
</div>
<div id="deleteZone" class="zone">
<span class="catHeader">Delete zone</span>
<div id="nameListDeleted"></div>
</div>
</div>
<div style="clear:both">
<div id="dropBox1" class="zone">
<span class="catHeader">Drop1</span>
<div id="dropZone1"></div>
</div>
<div id="dropBox2" class="zone">
<span class="catHeader">Drop2</span>
<div id="dropZone2"></div>
</div>
</div>
<div style="clear:both;margin:8px;">
<span id="loghead" class="catHeader">drag-n-drop message log:</span>
<textarea class="logBox" id="logger" rows="6" cols="80"></textarea>
</div>
</div>
</body>
</html>
Rico Drag and Drop with Custom Drag Class
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico Custom Draggable</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("DragAndDrop");
var CustomDraggable;
Rico.onLoad( function() {
Rico.setDebugArea("logger");
CustomDraggable = Class.create();
checkQueryString();
CustomDraggable.prototype = Object.extend(new Rico.Draggable(), CustomDraggableMethods);
writeNameSpans();
createDraggables();
dndMgr.registerDropZone( new Rico.Dropzone($("dropZone")));
});
function checkQueryString() {
var inputs=document.getElementsByTagName("input");
var s=window.location.search;
for (var i=0; i<inputs.length; i++) {
if (s.indexOf(inputs[i].id+"=") >= 0) {
CustomDraggable[inputs[i].id]=true;
inputs[i].checked=true;
}
inputs[i].onclick=function() { document.forms[0].submit(); };
}
}
var names = [ "Holloman, Debbie", "Barnes, Pat", "Dampier, Joan", "Alvarez, Randy",
"Neil, William", "Hardoway, Kimber", "Story, Leslie", "Lott, Charlie",
"Patton, Sabrina", "Lopez, Juan" ];
function writeNameSpans() {
var s="";
for ( var i = 0 ; i < names.length ; i++ )
s+="<div id="d" + i + "">" + names[i] + "<\/div>";
$("nameList").innerHTML=s;
}
function createDraggables() {
for ( var i = 0 ; i < names.length ; i++ )
dndMgr.registerDraggable( new CustomDraggable($("d"+i), names[i]) );
}
/**
* Sample "CustomDraggable" object which extends the Rico.Draggable to
* override the behaviors associated with a draggable object...
**/
var CustomDraggableMethods = {
initialize: function( htmlElement, name ) {
this.type = "Custom";
this.htmlElement = $(htmlElement);
this.name = name;
},
select: function() {
this.selected = true;
var el = this.htmlElement;
// show the item selected.....
el.style.color = "#ffffff";
el.style.backgroundColor = "#08246b";
},
deselect: function() {
this.selected = false;
var el = this.htmlElement;
el.style.color = "#2b2b2b";
el.style.backgroundColor = "transparent";
},
startDrag: function() {
Rico.writeDebugMsg("startDrag: [" + this.name +"]");
},
cancelDrag: function() {
Rico.writeDebugMsg("cancelDrag: [" + this.name +"]");
},
endDrag: function() {
Rico.writeDebugMsg("endDrag: [" + this.name +"]");
if ( CustomDraggable.removeOnDrop )
this.htmlElement.style.display = "none";
},
getSingleObjectDragGUI: function() {
var div = document.createElement("div");
div.className = "customDraggable";
div.style.width = (this.htmlElement.offsetWidth - 10) + "px";
Element.insert(div,this.name);
return div;
},
getDroppedGUI: function() {
var div = document.createElement("div");
var n=this.name
if (CustomDraggable.reverseNamesOnDrop) {
var names = n.split(",");
n=names[1].substring(1) + " " + names[0];
}
Element.insert(div,"[" + n + "]");
return div;
},
toString: function() {
return this.name;
}
}
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
span.code {
font-family : fixed;
font-size : 11px;
color : #4b4b4b;
}
.logBox {
background-color : #ffffee;
border : 1px solid #8b8b8b;
font-size : 8pt;
}
.customDraggable {
background-color : #E0DDB5;
color : #5b5b5b;
border : 1px solid #5b5b5b;
/* filter : alpha(Opacity=70); */
-moz-opacity : 0.7;
padding : 1px 5px 1px 5px;
font-size : 11px;
}
.listBox {
padding-top : 5px;
padding-bottom : 5px;
background-color : #ffffff;
border : 1px solid #8b8b8b;
}
.listBox * {
margin: 0px;
padding: 0px;
font-size : 11px;
font-family : Verdana, Arial, Helvetica;
}
.catHeader {
font-family : Arial;
font-weight : bold;
font-size : 11px;
color : #5b5b5b;
margin-left : 8px;
margin-top : 12px;
margin-bottom: 0px;
display : block;
}
.codeBox {
padding-top : 5px;
padding-bottom : 5px;
background-color : #E0DDB5;
}
input {
margin-left: 2em;
}
</style>
</head>
<body>
<h1 style="float:left;">Rico Drag & Drop with Custom Drag Class</h1>
<form method="get" action="">
<p style="font-size:9pt;clear:both;">Select drag-and-drop options:
<br>
<input type="checkbox" name="removeOnDrop" id="removeOnDrop" value="Y"> <label for="removeOnDrop">Remove On Drop</label>
<input type="checkbox" name="reverseNamesOnDrop" id="reverseNamesOnDrop" value="Y"> <label for="reverseNamesOnDrop">Reverse Names On Drop</label>
</p>
</form>
<p class="catHeader">the example</p>
<div id="exampleContainer" style="width:540px;background-color:#E0DDB5;padding-bottom:8px;">
<div id="dragBox" style="display:inline;margin-left:8px;margin-bottom:8px;float:left;">
<span class="catHeader">availalble name-list</span>
<div class="listBox" id="nameList" style="width:250px;height:140px;overflow:auto;"></div>
</div>
<div id="dropBox" style="margin-left:8px;margin-bottom:8px;float:left">
<span class="catHeader">dropped name-list</span>
<div class="listBox" id="dropZone" style="width:250px;height:140px;overflow:auto;">
</div>
</div>
<div style="clear:both;margin-left:8px;">
<span id="loghead" class="catHeader">drag-n-drop message log:</span>
<textarea class="logBox" id="logger" rows="8" cols="60"></textarea>
</div>
</div>
<p class="catHeader">the code</p>
<div class="codeBox" style="width:540px;height:250px;overflow:auto;">
<pre><span class="code">var CustomDraggable = Class.create();
CustomDraggable.prototype = (new Rico.Draggable()).extend( {
<b>initialize</b>: function( htmlElement, name ) {
this.type = "Custom";
this.htmlElement = $(htmlElement);
this.name = name;
},
<b>select</b>: function() {
this.selected = true;
var el = this.htmlElement;
// show the item selected.....
el.style.color = "#ffffff";
el.style.backgroundColor = "#08246b";
},
<b>deselect</b>: function() {
this.selected = false;
var el = this.htmlElement;
el.style.color = "#2b2b2b";
el.style.backgroundColor = "transparent";
},
<b>startDrag</b>: function() {
Rico.writeDebugMsg("startDrag: [" + this.name +"]");
},
<b>cancelDrag</b>: function() {
Rico.writeDebugMsg("cancelDrag: [" + this.name +"]");
},
<b>endDrag</b>: function() {
Rico.writeDebugMsg("endDrag: [" + this.name +"]");
},
<b>getSingleObjectDragGUI</b>: function() {
var div = document.createElement("div");
div.className = "customDraggable";
div.style.width = this.htmlElement.offsetWidth - 10;
Element.insert(div,this.name);
return div;
},
<b>getDroppedGUI</b>: function() {
var div = document.createElement("div");
var n=this.name
if (CustomDraggable.reverseNamesOnDrop) {
var names = n.split(",");
n=names[1].substring(1) + " " + names[0];
}
Element.insert(div,"[" + n + "]");
return div;
}
} );</span></pre>
</div>
</body>
</html>
Rico Drag and Drop - with dynamically created drop zones
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Corner","DragAndDrop");
var dropCnt=1;
Rico.onLoad( function() {
dndMgr.registerDraggable( new Rico.Draggable("test-rico-dnd","dragme") );
dndMgr.registerDropZone( new Rico.Dropzone("droponme") );
});
function CreateDropZone() {
var div = document.createElement("div");
var title = document.createElement("div");
div.className="simpleDropPanel";
title.className="title";
dropCnt++;
title.innerHTML="Drop On Me #"+dropCnt;
div.appendChild(title);
var id="dropzone"+dropCnt
div.id=id;
Element.setStyle(div, {backgroundColor:"#c6c3de"});
document.body.appendChild(div);
dndMgr.registerDropZone( new Rico.Dropzone(id) );
}
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
div.title {
font-family : Arial;
font-size : 10px;
background-color : #797979;
color : #ffffff;
width : 200px;
margin : 1px;
}
div.box {
font-family : Arial;
font-size : 14px;
width : 100px;
height : 40px;
text-align : center;
border-bottom : 1px solid #6b6b6b;
border-right : 1px solid #6b6b6b;
}
div.panel {
width : 200px;
height : 80px;
padding : 2px;
border : 1px solid #5b5b5b;
}
div.simpleDropPanel {
width : 200px;
height : 80px;
padding : 2px;
border : 1px solid #5b5b5b;
margin-top: 3px;
}
</style>
</head>
<body>
<h1 style="float:left;">Rico Drag & Drop - with dynamically created drop zones</h1>
<p style="clear:both;"><button onclick="CreateDropZone()">Create Drop Zone</button></p>
<div style="padding:5px;border:1px solid #5b5b5b;height:50px;">
<div class="box" style="background:#f7a673" id="dragme">Drag Me</div>
</div>
<div id="droponme" class="simpleDropPanel" style="background:#ffd773">
<div class="title">Drop On Me</div>
</div>
</body>
</html>
Rico Simple Drag and Drop Example
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Rico</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("Corner","DragAndDrop");
Rico.onLoad( function() {
Rico.Corner.round("explanation");
dndMgr.registerDraggable( new Rico.Draggable("test-rico-dnd","dragme") );
dndMgr.registerDropZone( new Rico.Dropzone("droponme") );
dndMgr.registerDropZone( new Rico.Dropzone("droponme2") );
});
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
div.title {
font-family : Arial;
font-size : 10px;
background-color : #797979;
color : #ffffff;
width : 200px;
margin : 1px;
}
div.box {
font-family : Arial;
font-size : 14px;
width : 100px;
height : 40px;
text-align : center;
border-bottom : 1px solid #6b6b6b;
border-right : 1px solid #6b6b6b;
}
div.panel {
width : 200px;
height : 80px;
padding : 2px;
border : 1px solid #5b5b5b;
}
div.explanation {
font-family : Arial;
font-size : 12px;
width : 600px;
background-color : #cdd7b5;
}
div.simpleDropPanel {
width : 200px;
height : 80px;
padding : 2px;
border : 1px solid #5b5b5b;
}
</style>
</head>
<body>
<h1 style="float:left;">Rico Simple Drag & Drop Example</h1>
<div style="padding:5px;border:1px solid #5b5b5b;height:50px;clear:both;">
<div class="box" style="background:#f7a673" id="dragme">Drag Me</div>
</div>
<p><table style="margin-bottom:8px" cellspacing="3" cellpadding="3">
<tr>
<td>
<div id="droponme" class="simpleDropPanel" style="background:#ffd773">
<div class="title">Drop On Me</div>
</div>
</td>
<td>
<div id="droponme2" class="simpleDropPanel" style="background:#c6c3de">
<div class="title">Drop On Me 2</div>
</div>
</td>
</tr>
</table>
<div id="explanation" class="explanation">
<pre>
<div class="box" style="background:#f7a673" id="dragme">
Drag Me
</div>
<div style="margin-bottom:8px;">
<div id="droponme" class="panel" style="display:inline;background:#ffd773">
<div class="title">Drop On Me</div>
</div>
<span> </span>
<div id="droponme2" class="panel" style="display:inline;background:#c6c3de">
<div class="title">Drop On Me 2</div>
</div>
</div>
<script>
dndMgr.registerDraggable( new Rico.Draggable("test-rico-dnd","dragme") );
dndMgr.registerDropZone( new Rico.Dropzone("droponme") );
dndMgr.registerDropZone( new Rico.Dropzone("droponme2") );
</script></pre>
</div>
</body>
</html>
Track drop-and-drop objects as they are moved by the user
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rico TV Networks</title>
<script src="rico21/src/rico.js" type="text/javascript"></script>
<script type="text/javascript">
Rico.loadModule("DragAndDrop");
var names = [ "CNN", "ZDF", "BBC", "MTV", "CNBC", "NHK" ];
var CustomDraggable;
Rico.onLoad( function() {
Rico.setDebugArea("logger");
CustomDraggable = Class.create();
CustomDraggable.prototype = Object.extend(new Rico.Draggable(), CustomDraggableMethods);
var n=$("nameList");
for ( var i=0; i < names.length; i++ ) {
var d=document.createElement("div");
d.id="d" + i;
d.className="CustomDraggable";
d.innerHTML=names[i];
n.appendChild(d);
dndMgr.registerDraggable( new CustomDraggable("Custom", d) );
}
dndMgr.registerDropZone( new Rico.Dropzone("dropZone1"));
dndMgr.registerDropZone( new Rico.Dropzone("dropZone2"));
dndMgr.registerDropZone( new Rico.Dropzone("nameListDeleted"));
});
var CustomDraggableMethods = {
startDrag: function() {
this.startParent=this.htmlElement.parentNode;
Rico.writeDebugMsg("startDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id +"]");
},
endDrag: function() {
this.endParent=this.htmlElement.parentNode;
Rico.writeDebugMsg("endDragging: " + this.htmlElement.innerHTML + " from [" + this.startParent.id + "] to [" + this.endParent.id + "]" );
}
}
</script>
<style type="text/css">
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
}
h1 { font-size: 16pt; }
.logBox {
background-color : #ffffee;
border : 1px solid #8b8b8b;
font-size : 8pt;
}
.listBox {
padding: 5px;
background-color : #ffffff;
border : 1px solid #8b8b8b;
width:200px;
height:100px;
overflow:auto;
}
.listBox * {
margin: 0px;
padding: 0px;
font-size : 11px;
font-family : Arial, Helvetica;
}
span.catHeader {
font-family : Arial;
font-weight : bold;
font-size : 11px;
color : #5b5b5b;
margin-left : 8px;
margin-top : 12px;
display : block;
}
.zone {
display:inline;
margin-left:8px;
margin-bottom:8px;
float:left;
}
div.CustomDraggable {
z-index:10;
color: blue;
}
</style>
</head>
<body>
<h1>Rico Drag-and-Drop: TV Networks</h1>
<p>This example demonstrates how to track drop-and-drop objects as they are moved by the user. Watch the log messages!</p>
<div id="exampleContainer" style="float:left;background-color:#DDD;">
<div>
<div id="dragBox" class="zone">
<span class="catHeader">Channels</span>
<div class="listBox" id="nameList"></div>
</div>
<div id="deleteZone" class="zone">
<span class="catHeader">Delete zone</span>
<div class="listBox" id="nameListDeleted"></div>
</div>
</div>
<div style="clear:both">
<div id="dropBox1" class="zone">
<span class="catHeader">Drop1</span>
<div class="listBox" id="dropZone1"></div>
</div>
<div id="dropBox2" class="zone">
<span class="catHeader">Drop2</span>
<div class="listBox" id="dropZone2"></div>
</div>
</div>
<div style="clear:both;margin:8px;">
<span id="loghead" class="catHeader">drag-n-drop message log:</span>
<textarea class="logBox" id="logger" rows="8" cols="80"></textarea>
</div>
</div>
</body>
</html>