cant remember where i got this, somewhere on ee i think but take a look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
.Title{
width: 100%;
background-color: #E6E6E6;
color: #000000;
font-family: tahoma;
font-size: 10px;
font-weight: bold;
padding: 2px;
}
.Drag,.DragH{
cursor: hand;
position: relative;
padding: 1px;
overflow: hidden;
}
.Window{
position: relative;
}
.DragH{
position: absolute;
}
</style>
</HEAD>
<BODY>
<div id="Nav0" style="width:100px;float:l
<div id="Nav1" style="width:100px;float:l
<div id="Holder" class="DragH" style="display:none;filter
<div id="WindowDefs">
<div id="Window0" style="display:none;" class="Drag"><div class="Title">Left Option #1</div></div>
<div id="Window1" style="display:none;" class="Drag"><div class="Title">Left Option #2</div></div>
<div id="Window2" style="display:none;" class="Drag"><div class="Title">Left Option #3</div></div>
<div id="Window3" style="display:none;" class="Drag"><div class="Title">Right Option #1</div></div>
<div id="Window4" style="display:none;" class="Drag"><div class="Title">Right Option #2</div></div>
<div id="Window5" style="display:none;" class="Drag"><div class="Title">Right Option #3</div></div>
<script>
var Containers = 2;
var ConPrefix = 'Nav';
var ModPrefix = 'Window';
var Modules = 6;
var DropColor = '#FF0000';
var Locations = new Array(new Array(0, 1, 2), new Array(3, 4, 5));
var Drag = false;
var e = null;
var h = document.getElementById('H
var x, y, t, pOpt, optDrop, D, oBorder;
function addElement(array, addindex, addvalue) {
size = array.length;
validNo = (addindex != "NaN");
inRange = ( (addindex >= 0) && (addindex <= array.length+1) );
if (validNo && inRange) {
for (var i=array.length+1; i>addindex; i--) array[i] = array[i-1];
array[addindex] = addvalue;
array.length = array.length-1;
}
else alert("You only add element indexes between 0 and " + (size) + ".");
}
function deleteElement(array, delindex) {
size = array.length;
validNo = (delindex != "NaN");
inRange = ( (delindex >= 0) && (delindex <= array.length) );
if (validNo && inRange && size>0) {
for(var i=delindex; i<size-1; i++){
array[i] = array[i+1];
}
array.length-=1;
}
else alert("You only delete from element index 0 to " + (size-1) + ".");
}
function ReDrawWindows(){
var Content = new Array();
for(var i=0; i<Containers; i++){
Content[i] = '';
for(var j=0; j<Locations[i].length; j++)
Content[i]+=document.getEl
document.getElementById(Co
for(var j=0; j<Locations[i].length; j++)
// alert((100/Locations[i].le
document.getElementById(Co
}
}
function MouseDown(){
e = event.srcElement;
for(var i=0; i<30 && e.className!='Drag'; i++)
try{if(e.parentElement) e = e.parentElement;}catch(err
if(e.className=='Drag'){
x = event.clientX-e.offsetLeft
y = event.clientY-e.offsetTop;
h.innerHTML = e.innerHTML;
h.style.width = e.offsetWidth;
h.style.height = e.offsetHeight;
h.style.display = '';
h.style.pixelTop = e.offsetTop;
h.style.pixelLeft = e.offsetLeft;
Drag = true;
e.style.visibility = 'hidden';
}
}
function MouseUp(){
Drag = false;
h.style.display = 'none';
if(!e) return false;
if(typeof(optDrop)!='undef
try{
// document.getElementById(Mo
var to = (optDrop.id.indexOf('_')>=
var from = e.id.split('_');
var oSrc = Locations[from[1]][from[2]
deleteElement(Locations[fr
addElement(Locations[to[1]
} catch(err) {}
}
if(typeof(pOpt)!='undefine
if(e.className=='Drag') ReDrawWindows();
e = null;
optDrop = null;
}
function MouseMove(){
if(!Drag || e==null) return false;
if(typeof(pOpt)!='undefine
h.style.pixelTop = event.clientY-y;
h.style.pixelLeft = event.clientX-x;
// find the best spot to drop, if applicable
var c, o, d, mD=5000, tD;
optDrop=D=c;
for(var i=0; i<Containers; i++){
c = document.getElementById(Co
// check the children of each container
for(var j=0; j<c.children.length; j++){
o = c.children[j];
d = getDistance(o);
tD = checkOpt(o, c.h=='false'?false:true, c.v=='false'?false:true);
if(tD.mD<mD) { mD = tD.mD; D = tD.D; optDrop = o; }
}
// check the container itself (in case it has no children)
if(mD==5000){
d = getDistance(c);
tD = checkOpt(c, c.h=='false'?false:true, c.v=='false'?false:true);
if(tD.mD<mD) { mD = tD.mD; D = tD.D; optDrop = c; }
}
}
if (typeof(optDrop)!='undefin
oBorder = optDrop.style.border;
if(D=='Y0'){
optDrop.style.borderTop = '1px solid #FF0000';
}else if(D=='Y1'){
optDrop.style.borderBottom
}else if(D=='X0'){
optDrop.style.borderLeft = '1px solid #FF0000';
}else if(D=='X1'){
optDrop.style.borderRight = '1px solid #FF0000';
}
}
pOpt = optDrop;
return false;
}
function getDistance(o){
return {x:h.offsetLeft-o.offsetLe
}
function checkOpt(o, horiz, vert){
var mD=5000, d, D;
if(vert){
// check top
if(h.offsetTop<=o.offsetTo
d = Math.pow(Math.pow((h.offse
if(d<mD){ mD = d; D='Y0'; }
}
// check bottom
if(h.offsetTop<=(o.offsetT
d = Math.pow(Math.pow((h.offse
if(d<mD){ mD = d; D='Y1'; }
}
}
if(horiz){
// check left
if(h.offsetLeft<=o.offsetL
d = Math.pow(Math.pow((h.offse
if(d<mD){ mD = d; D='X0'; }
}
// check right
if(h.offsetLeft<=(o.offset
d = Math.pow(Math.pow((h.offse
if(d<mD){ mD = d; D='X1'; }
}
}
return {mD:mD,D:D};
}
function select(){
return false;
}
function getHTML(url) {
var xmlhttp = new ActiveXObject("Microsoft.X
xmlhttp.open("GET", url + "&randomnum=" + Math.floor(Math.random()*1
xmlhttp.send("");
alert(xmlhttp.responseCode
return xmlhttp.responseText;
}
document.onmousedown = MouseDown;
document.onmousemove = MouseMove;
document.onmouseup = MouseUp;
document.onselect = select;
ReDrawWindows();
</script>
</BODY>
</HTML>
Main Topics
Browse All Topics
by: dguthuPosted on 2005-09-02 at 10:01:14ID: 14811833
Drag and drop portlets? Please explain what you mean? You say DHTML portlets, do you want the user to be able to move the portlets around?
David