Rico Custom Draggable
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
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+="" + 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;
}
}
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;
}
Rico Drag & Drop with Custom Drag Class
Select drag-and-drop options:
Remove On Drop
Reverse Names On Drop
the example
availalble name-list