//Drag and Drop script - http://www.btinternet.com/~kurt.grigg/javascript
/*
1: Put this style sheet and the dragdrop.js link between the head tags of your page html.
IMPORTANT! Do not remove "position : relative;" from the dragclass style.
.dragclass{
position : relative;
cursor : move;
}
2: To apply drag and drop status to something just give it the dragclass.
Example:
Blah blah
*/
Drag and Drop
.dragclass{
position : relative;
cursor : move;
}
//Drag and Drop script - http://www.btinternet.com/~kurt.grigg/javascript
if (document.getElementById){
(function(){
//Stop Opera selecting anything whilst dragging.
if (window.opera){
document.write("");
}
var n = 500;
var dragok = false;
var y,x,d,dy,dx;
function move(e){
if (!e) e = window.event;
if (dragok){
d.style.left = dx + e.clientX - x + "px";
d.style.top = dy + e.clientY - y + "px";
return false;
}
}
function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
}
if (temp.className == "dragclass"){
if (window.opera){
document.getElementById("Q").focus();
}
dragok = true;
temp.style.zIndex = n++;
d = temp;
dx = parseInt(temp.style.left+0);
dy = parseInt(temp.style.top+0);
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
return false;
}
}
function up(){
dragok = false;
document.onmousemove = null;
}
document.onmousedown = down;
document.onmouseup = up;
})();
}//End.
P tag
Div: Relative position
.
.
B tag
Div: Absolute position