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>
Related examples in the same category