JavaScript DHTML/Rico/Drag Drop
Содержание
Rico Drag-and-Drop: LiveGrids
<source lang="html4strict">
<!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>
Rico Drag-and-Drop: LiveGrids
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.
Delete zone
Drop1
Drop2
drag-n-drop message log:
<textarea class="logBox" id="logger" rows="6" cols="80"></textarea>
</body> </html>
</source>
Rico Drag and Drop with Custom Drag Class
<source lang="html4strict">
<!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+="
$("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>
Rico Drag & Drop with Custom Drag Class
<form method="get" action="">
Select drag-and-drop options:
<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>
</form>
the example
availalble name-list
dropped name-list
drag-n-drop message log:
<textarea class="logBox" id="logger" rows="8" cols="60"></textarea>
the code
<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>
</body> </html>
</source>
Rico Drag and Drop - with dynamically created drop zones
<source lang="html4strict">
<!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>
Rico Drag & Drop - with dynamically created drop zones
<button onclick="CreateDropZone()">Create Drop Zone</button>
</body> </html>
</source>
Rico Simple Drag and Drop Example
<source lang="html4strict">
<!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>
Rico Simple Drag & Drop Example
|
Drop On Me
|
Drop On Me 2
|
<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>
</body> </html>
</source>
Track drop-and-drop objects as they are moved by the user
<source lang="html4strict">
<!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>
Rico Drag-and-Drop: TV Networks
<p>This example demonstrates how to track drop-and-drop objects as they are moved by the user. Watch the log messages! Channels
Delete zone
Drop1
Drop2
drag-n-drop message log:
<textarea class="logBox" id="logger" rows="8" cols="80"></textarea>
</body> </html>
</source>