Rico TV Networks
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 + "]" );
}
}
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;
}
Rico Drag-and-Drop: TV Networks
This example demonstrates how to track drop-and-drop objects as they are moved by the user. Watch the log messages!
Channels