tak for linket - har rettet det lidt til - da jeg kun skal bruge den hvor det er på et afgrænset felt.
problemet er at jeg nu skal have siden genindlæst når brugeren slipper for at få x og y kordinaterne vist - kan du hjælpe med det ???
her er det tilrettede script
<html>
<head>
<title>=maddog=s dragmanager</title>
<style type="text/css">
div {
position:relative;
cursor:default;
background-color: #CCCCCC;
}
</style>
<script type="text/javascript">
if (window.Node) {
// Moz extensions
Event.prototype.__defineGetter__("clientX", function() { return this.pageX; } );
Event.prototype.__defineGetter__("clientY", function() { return this.pageY; } );
Event.prototype.__defineGetter__("offsetX", function () { return this.layerX; } );
Event.prototype.__defineGetter__("offsetY", function () { return this.layerY; } );
Event.prototype.__defineGetter__("srcElement", function () {
var node = this.target;
while (node.nodeType != 1) node = node.parentNode;
return node;
});
}
function DragManager() {
this.registeredElements = new Array();
this.register = function(element) {
// see if any removed element slots are available
for (i=0;i!=this.registeredElements.length;i++) {
if(this.registeredElements[i]==null) {
this.registeredElements[i]=element;
return;
}
}
// Otherwise expand the register by one
this.registeredElements[this.registeredElements.length]=element;
// update
this.update();
// mark the element so we don't register twice
element.markedForDrag = true;
}
this.remove = function(element) {
// locate and remove the element if present.
for (i=0;i!=this.registeredElements.length;i++) {
if(this.registeredElements[i]==element)
this.registeredElements[i]=null;
}
this.update();
// demark the element
element.markedForDrag = false;
}
this.grabElement = function(e) {
// See if the source is registered and select if so
if(e)event=e;
for (i=0;i!=this.registeredElements.length;i++) {
if(this.registeredElements[i]==event.srcElement) {
this.selected=event.srcElement;
break;
}
}
if (this.selected!=null) {
this.selected = (this.selected.proxy)?this.selected.proxy:this.selected;
this.selected.style.zIndex = this.zIndex++;
this.offsetX = event.clientX-(isNaN(parseInt(this.selected.style.left))?0:parseInt(this.selected.style.left));
this.offsetY = event.clientY-(isNaN(parseInt(this.selected.style.top))?0:parseInt(this.selected.style.top));
if (this.selected.invokeOnGrab!=null)
this.selected.invokeOnGrab(event);
}
}
this.dragElement = function(e) {
if(e)event=e;
if(this.selected) {
if(this.selected.isAnchored) return;
theoreticalLeft = event.clientX-this.offsetX;
theoreticalTop = event.clientY-this.offsetY;
if(!this.selected.verticalLock) {
if (this.selected.topBound!=null||this.selected.topBound==0)
theoreticalTop=(theoreticalTop<this.selected.topBound)?this.selected.topBound:theoreticalTop;
if (this.selected.bottomBound!=null||this.selected.bottomBound==0)
theoreticalTop=(theoreticalTop>this.selected.bottomBound)?this.selected.bottomBound:theoreticalTop;
this.selected.style.top = theoreticalTop+"px";
if (this.selected.invokeOnMove)
this.selected.invokeOnMove(event);
}
if(!this.selected.horizontalLock) {
if (this.selected.leftBound||this.selected.leftBound==0)
theoreticalLeft=(theoreticalLeft<this.selected.leftBound)?this.selected.leftBound:theoreticalLeft;
if (this.selected.rightBound||this.selected.rightBound==0)
theoreticalLeft=(theoreticalLeft>this.selected.rightBound)?this.selected.rightBound:theoreticalLeft;
this.selected.style.left = theoreticalLeft+"px";
if (this.selected.invokeOnMove)
this.selected.invokeOnMove(event);
}
}
return false; // avoid event propagation downwards.
}
this.releaseElement = function(e) {
if(e)event=e;
if(this.selected) {
if (this.selected.invokeOnRelease)
this.selected.invokeOnRelease(event);
this.selected=null;
}
}
}
DragManager.prototype.init = function() {
if (!window.Element) {
document.zIndex = 0;
document.onmousedown = this.grabElement;
document.onmousemove = this.dragElement;
document.onmouseup = this.releaseElement;
this.owner = document;
} else {
window.zIndex = 0;
window.onmousedown = this.grabElement;
window.onmousemove = this.dragElement;
window.onmouseup = this.releaseElement;
this.owner = window
}
}
DragManager.prototype.update = function() {
if (!window.Element) {
document.registeredElements = this.registeredElements;
} else {
window.registeredElements = this.registeredElements;
}
}
onload = function() {
// DragManager tilbyder en masse drag funktionalitet.
// Først skal vi oprette en DragManager. Der bør være en DragManager pr. window/document object
// selvom den i princippet kan afregistreres og registrere sig i en iframe.
myDrag = new DragManager();
myDrag.init(); // binder den til document (for IE) eller window (for NS)
// Goody. Lad os få fingre i en div at lege med
// Nogle gange er det nødvendigt at layers kun kan flyttes inden for et afgrænset område. Det gør vi ved at erklære
// følgende varible: topBound, bottomBound, leftBound og rightBound.
// Det er et vidunder til virtuelle scrollbars.
myObj = document.getElementById("Nr4");
myObj.leftBound = 0; // kan ikke flyttes mere end 0 pixels til venstre
myObj.rightBound = 300; // kan ikke flyttes mere end 300 pixels til højre
myObj.topBound = 0; // kan ikke flyttes mere end 0 pixels til op
myObj.bottomBound = 300; // ken ikke flyttes mere end 300 pixels nedad
myDrag.register(myObj);
myDrag.register(myObj);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="Nr4" style="position:absolute; width:100px; height:50px; z-index:4">En
Div, der ikke kan slippe væk</div>
<table width="400" height="350" border="1" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Ny bruger
Nybegynder
Opret
Preview
