[CB] Drag and Drop Category Splitter

Description: Splits the categories so that there is a gap between them and allows users to order them how they like.
Tested In: Firefox 3.6.13, Opera 10, Google Chrome 8, Internet Explorer 8

Main Footer
<script type="text/javascript"><!--
/*
*  Drag and Drop Category Splitter
*  Made by moneyman18
*/

var gap = 22;

/*==(Do Not Edit Below)==*/
function addEvent(el, type, func){
if(el.addEventListener)
el.addEventListener(type, func, false);
else if(el.attachEvent)
el.attachEvent('on'+type, func);
else
el['on'+type] = func;
}

function removeEvent(el, type, func){
if(el.removeEventListener)
el.removeEventListener(type, func, false);
else if(el.detachEvent)
el.detachEvent('on'+type, func);
else
el['on'+type] = null;
}

var Draggable = {
currently_dragging: null,
startDrag: function(e){
Draggable.currently_dragging = e.target || e.srcElement;
while(Draggable.currently_dragging.nodeName.toLowerCase() != 'table')
if(Draggable.currently_dragging.parentNode)
Draggable.currently_dragging = Draggable.currently_dragging.parentNode;
else
return false;
with(Draggable.currently_dragging.style){
opacity = .75;
filter = 'alpha(opacity=75)';
zIndex = 1000;
}
Draggable.currently_dragging_position = coordinates.element(Draggable.currently_dragging);
var coords = coordinates.mouse(e);
Draggable.currently_dragging_position_offset = {
'y': coords.y-Draggable.currently_dragging_position.y,
'x': coords.x-Draggable.currently_dragging_position.x
};
addEvent(document, 'mousemove', Draggable.drag);
addEvent(document, 'mouseup', Draggable.stopDrag);
},
drag: function(e){
if(Draggable.currently_dragging != null){
var coords = coordinates.mouse(e);
with(Draggable.currently_dragging.style){
left = ((coords.x-Draggable.currently_dragging_position.x)-Draggable.currently_dragging_position_offset.x)+'px';
top = ((coords.y-Draggable.currently_dragging_position.y)-Draggable.currently_dragging_position_offset.y)+'px';
}
if(move.before(Draggable.currently_dragging) || move.after(Draggable.currently_dragging)){
with(Draggable){
with(currently_dragging.style){
left = 0;
top = 0;
}
currently_dragging_position = coordinates.element(Draggable.currently_dragging);
drag(e);
}
}
if(document.selection && document.selection.empty)
document.selection.empty();
else if(window.getSelection && (sel = window.getSelection()) && sel.removeAllRanges)
sel.removeAllRanges();
}
},
stopDrag: function(){
removeEvent(document, 'mousemove', Draggable.drag);
removeEvent(document, 'mouseup', Draggable.stopDrag);
with(Draggable.currently_dragging.style){
left = 0;
top = 0;
opacity = 1;
filter = 'alpha(opacity=100)';
zIndex = 'auto';
}
Draggable.currently_dragging = null;
order.save();
}
};

var coordinates = {
mouse: function(e){
e = e || window.event;
if(e.clientX || e.clientY)
return {
'x': e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft)-(document.documentElement.clientLeft || 0),
'y': e.clientY+(document.documentElement.scrollTop || document.body.scrollTop)-(document.documentElement.clientTop || 0)
};
else
return {
'x': (document.documentElement.scrollLeft || document.body.scrollLeft)-(document.documentElement.clientLeft || 0),
'y': (document.documentElement.scrollTop || document.body.scrollTop)-(document.documentElement.clientTop || 0)
};
},
element: function(el){
return {
'x': el.offsetLeft,
'y': el.offsetTop
};
}
};

var move = {
before: function(el1){
var el2 = el1.previousSibling;
if(el2 != null && coordinates.element(el1).y < (coordinates.element(el2).y+el2.offsetHeight/2)){
with(el1.parentNode){
insertBefore(el1, el2);
if(lastChild == el2){
el2.style.marginBottom = 0;
if(pb_username != 'Guest')
el2.rows[0].parentNode.appendChild( el1.rows[el1.rows.length-1] );
}
}
el1.style.marginBottom = gap+'px';
return true;
}
return false;
},
after: function(el1){
var el2 = el1.nextSibling;
if(el2 != null && (coordinates.element(el1).y+el1.offsetHeight) > (coordinates.element(el2).y+el2.offsetHeight/2)){
with(el1.parentNode){
insertBefore(el1, (el2.nextSibling? el2.nextSibling : null));
if(lastChild == el1){
el1.style.marginBottom = 0;
if(pb_username != 'Guest')
el1.rows[0].parentNode.appendChild( el2.rows[el2.rows.length-1] );
}
}
el2.style.marginBottom = gap+'px';
return true;
}
return false;
}
};

var order = {
restore: function(categories){
if(pb_username != 'Guest')
var markAsRead = wrapperDiv.lastChild.rows[wrapperDiv.lastChild.rows.length-1];
mTable = wrapperDiv.getElementsByTagName('table');
for(a = 0; a < categories.length; a++)
for(b = 0; b < mTable.length; b++)
if(categories[a] == mTable[b].getElementsByTagName('a')[0].name){
mTable[b].style.marginBottom = gap+'px';
wrapperDiv.appendChild( mTable[b] );
}
with(wrapperDiv.lastChild){
style.marginBottom = 0;
if(pb_username != 'Guest')
rows[0].parentNode.appendChild( markAsRead );
}
},
save: function(){
mTable = wrapperDiv.getElementsByTagName('table');
var categories = new Array();
for(i = 0; i < mTable.length; i++)
categories.push(mTable[i].getElementsByTagName('a')[0].name);
document.cookie = 'cOrder='+encodeURI(categories.join('|'))+'; expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;';
}
};

var mTable = document.getElementsByTagName('table');
var wrapperDiv = document.createElement('div');
for(a = 5; a < mTable.length; a++)
if(mTable[a].cellPadding == 4 && mTable[a-1].className == 'bordercolor' && /Forum\sName/i.test(mTable[a].rows[0].cells[0].innerHTML)){
for(b = 1; b < mTable[a].rows.length; b++)
if(mTable[a].rows[b].getElementsByTagName('a')[0].name){
with(Table = document.createElement('table')){
width = '100%';
align = 'center';
cellPadding = 4;
cellSpacing = 1;
className = 'bordercolor';
with(style){
marginBottom = gap+'px';
position = 'relative';
}
appendChild( document.createElement('tbody') );
with(firstChild){
appendChild( mTable[a].rows[0].cloneNode(true) );
appendChild( mTable[a].rows[b].cloneNode(true) );
}
}
Table.rows[1].cells[0].style.cursor = 'move';
addEvent(Table.rows[1].cells[0], 'mousedown', Draggable.startDrag);
wrapperDiv.appendChild( Table );
}else if(mTable[a].rows[b].cells[4] || mTable[a].rows[b].innerHTML.match(/action=markallboardsread/i))
Table.firstChild.appendChild( mTable[a].rows[b].cloneNode(true) );
wrapperDiv.lastChild.style.marginBottom = 0;
mTable[a-1].parentNode.replaceChild(wrapperDiv, mTable[a-1]);
if(document.cookie.match(/cOrder=(.+?)(?:;|$)/))
order.restore(decodeURI(RegExp.$1).split('|'));
break;
}
//--></script>

Edit Red number in the line below with the size of the gap between categories you would like.

var gap = 22;

You may edit and repost just keep the header intact.