var pos = getPosition(dragConts[i].childNodes[j]);
// save the width, height and position of each element
setAttribute('startWidth', parseInt(offsetWidth));
setAttribute('startHeight', parseInt(offsetHeight));
setAttribute('startLeft', pos.x);
setAttribute('startTop', pos.y);
}
}
}
}
}
// If we get in here we are dragging something
if(curTarget){
// move our helper div to wherever the mouse is (adjusted by mouseOffset)
dragHelper.style.top = mousePos.y - mouseOffset.y;
dragHelper.style.left = mousePos.x - mouseOffset.x;
var dragConts = DragDrops[curTarget.getAttribute('DragObj')];
var activeCont = null;
var xPos = mousePos.x - mouseOffset.x + (parseInt(curTarget.getAttribute('startWidth')) /2);
var yPos = mousePos.y - mouseOffset.y + (parseInt(curTarget.getAttribute('startHeight'))/2);
// check each drop container to see if our target object is "inside" the container
for(var i=0; i xPos) &&
((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)){
/*
our target is inside of our container so save the container into
the activeCont variable and then exit the loop since we no longer
need to check the rest of the containers
*/
activeCont = dragConts[i];
// exit the for loop
break;
}
}
}
// Our target object is in one of our containers. Check to see where our div belongs
if(activeCont){
if(activeCont!=curTarget.parentNode){
writeHistory(curTarget, 'Moved into '+activeCont.id);
}
// beforeNode will hold the first node AFTER where our div belongs
var beforeNode = null;
// loop through each child node (skipping text nodes).
for(var i=activeCont.childNodes.length-1; i>=0; i--){
with(activeCont.childNodes[i]){
if(nodeName=='#text') continue;
// if the current item is "After" the item being dragged
if(curTarget != activeCont.childNodes[i] &&
((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) &&
((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)){
beforeNode = activeCont.childNodes[i];
}
}
}
// the item being dragged belongs before another item
if(beforeNode){
if(beforeNode!=curTarget.nextSibling){
writeHistory(curTarget, 'Inserted Before '+beforeNode.id);
activeCont.insertBefore(curTarget, beforeNode);
}
// the item being dragged belongs at the end of the current container
} else {
if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){
writeHistory(curTarget, 'Inserted at end of '+activeCont.id);
activeCont.appendChild(curTarget);
}
}
// the timeout is here because the container doesn't "immediately" resize
setTimeout(function(){
var contPos = getPosition(activeCont);
activeCont.setAttribute('startWidth', parseInt(activeCont.offsetWidth));
activeCont.setAttribute('startHeight', parseInt(activeCont.offsetHeight));
activeCont.setAttribute('startLeft', contPos.x);
activeCont.setAttribute('startTop', contPos.y);}, 5);
// make our drag item visible
if(curTarget.style.display!=''){
writeHistory(curTarget, 'Made Visible');
curTarget.style.display = '';
curTarget.style.visibility = 'visible';
}
} else {
// our drag item is not in a container, so hide it.
if(curTarget.style.display!='none'){
writeHistory(curTarget, 'Hidden');
curTarget.style.display = 'none';
}
}
}
// track the current mouse state so we can compare against it next time
lMouseState = iMouseDown;
// mouseMove target
lastTarget = target;
}
if(Demos[2]){
document.getElementById('MouseXPosition').value = mousePos.x;
document.getElementById('MouseYPosition').value = mousePos.y;
}
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
}
// track the current mouse state so we can compare against it next time
lMouseState = iMouseDown;
// this prevents items on the page from being highlighted while dragging
if(curTarget || dragObject) return false;
}
function mouseUp(ev){
if(Demos[0] || Demos[4]){
if(curTarget){
writeHistory(curTarget, 'Mouse Up Fired');
dragHelper.style.display = 'none';
if(curTarget.style.display == 'none'){
if(rootSibling){
rootParent.insertBefore(curTarget, rootSibling);
} else {
rootParent.appendChild(curTarget);
}
}
curTarget.style.display = '';
curTarget.style.visibility = 'visible';
curTarget.style.cssText = 'FILTER:alpha(opacity=100);border:1px solid #000';
}
curTarget = null;
}
if(Demos[6] && dragObject){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
var dT = dragObject.getAttribute('droptarget');
if(dT){
var targObj = document.getElementById(dT);
var objPos = getPosition(targObj);
if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x<(objPos.x+parseInt(targObj.offsetWidth))) && (mousePos.y<(objPos.y+parseInt(targObj.offsetHeight)))){
var nSrc = targObj.getAttribute('newSrc');
if(nSrc){
dragObject.src = nSrc;
setTimeout(function(){
if(!dragObject || !dragObject.parentNode) return;
dragObject.parentNode.removeChild(dragObject);
dragObject = null;
}, parseInt(targObj.getAttribute('timeout')));
} else {
dragObject.parentNode.removeChild(dragObject);
}
}
}
}
dragObject = null;
iMouseDown = false;
}
function mouseDown(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
iMouseDown = true;
if(Demos[0] || Demos[4]){
if(lastTarget){
writeHistory(lastTarget, 'Mouse Down Fired');
}
}
if(target.onmousedown || target.getAttribute('DragObj')){
return false;
}
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
function makeClickable(item){
if(!item) return;
item.onmousedown = function(ev){
document.getElementById('ClickImage').value = this.name;
}
}
function addDropTarget(item, target){
item.setAttribute('droptarget', target);
}
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
window.onload = function(){
for(var i=0; i
if(Demos[0]){
CreateDragContainer(document.getElementById('DragContainer1'), document.getElementById('DragContainer2'), document.getElementById('DragContainer3'));
CreateDragContainer(document.getElementById('DragContainer7'));
CreateDragContainer(document.getElementById('DragContainer8'));
}
if(Demos[4]){
CreateDragContainer(document.getElementById('DragContainer1'), document.getElementById('DragContainer2'));
}
if(Demos[0] || Demos[4]){
// Create our helper object that will show the item while dragging
dragHelper = document.createElement('DIV');
dragHelper.style.cssText = 'position:absolute;display:none;';
document.body.appendChild(dragHelper);
}
if(Demos[1]){
makeDraggable(document.getElementById('DragImage1'));
makeDraggable(document.getElementById('DragImage2'));
makeDraggable(document.getElementById('DragImage3'));
makeDraggable(document.getElementById('DragImage4'));
}
if(Demos[5]){
makeDraggable(document.getElementById('DragImage5'));
makeDraggable(document.getElementById('DragImage6'));
makeDraggable(document.getElementById('DragImage7'));
makeDraggable(document.getElementById('DragImage8'));
}
if(Demos[6]){
makeDraggable(document.getElementById('DragImage9'));
makeDraggable(document.getElementById('DragImage10'));
makeDraggable(document.getElementById('DragImage11'));
makeDraggable(document.getElementById('DragImage12'));
addDropTarget(document.getElementById('DragImage9'), 'TrashImage1');
addDropTarget(document.getElementById('DragImage10'), 'TrashImage1');
addDropTarget(document.getElementById('DragImage11'), 'TrashImage1');
addDropTarget(document.getElementById('DragImage12'), 'TrashImage1');
}
if(Demos[3]){
makeClickable(document.getElementById('ClickImage1'));
makeClickable(document.getElementById('ClickImage2'));
makeClickable(document.getElementById('ClickImage3'));
makeClickable(document.getElementById('ClickImage4'));
}
}
</script>