drag and resize

Hej,

jag har följt tråden: Markera bild m lager samt förminska lagret. och har tyckt den koden som johnsen har föreslagit ser mycket bra ut.

Men nu försöker jag förändra det scriptet lite så att man kan göra resizing på många lager på en gång... men det fungerar inte så bra. Lagret som man drar i hänger inte med ordentligt som det gör när man bara har ett lager på sidan...
Varför?

Testa själv här: Drag and resize

Här kommer koden:

<script>

document.onmousemove = cropIt
document.onmousedown = lockIt
document.onmouseup = unLockIt

xlock = 0;
inPos = 0;
foundElement = 0;
//alert(myinfo.document.body.innerHTML);

function cropIt(e){
element = document.getElementById("foo")
element2 = document.getElementById("foo2")

x = (document.all)? event.x : e.pageX ;
y = (document.all)? event.y : e.pageY;

//status=inPos
status=foundElement

	if(	(element.offsetWidth - (x - parseInt(element.style.left))) < 0 &&
		(element.offsetWidth - (x - parseInt(element.style.left))) >-9 &&
		(element.offsetHeight - (y - parseInt(element.style.top))) < 0 &&
		(element.offsetHeight - (y - parseInt(element.style.top))) >-9 ){
			element.style.border="1px solid red"
			document.body.style.cursor="se-resize";
			inPos = 1;
			foundElement=1;
	}
	
	else if(	(element2.offsetWidth - (x - parseInt(element2.style.left))) < 0 &&
				(element2.offsetWidth - (x - parseInt(element2.style.left))) >-9 &&
				(element2.offsetHeight - (y - parseInt(element2.style.top))) < 0 &&
				(element2.offsetHeight - (y - parseInt(element2.style.top))) >-9 ){
					element2.style.border="1px solid red"
					document.body.style.cursor="se-resize";
					inPos = 1;
					foundElement=2;
	}
	
	else{
		document.body.style.cursor="default";
		switch (foundElement) {   
			case 1 :       
				element.style.border="1px solid blue"
				break;
			case 2 :       
				element2.style.border="1px solid blue"
				break;
			}
		inPos = 0;
		foundElement=0;
	}

	if(xlock==1){
		switch (foundElement) {   
			case 1 :       
				element.style.width = x - parseInt(element.style.left);
				element.style.height = y - parseInt(element.style.top);
				break;
			case 2 :       
				element2.style.width = x - parseInt(element2.style.left);
				element2.style.height = y - parseInt(element2.style.top);
				break;
			}

	}
}

function lockIt(){
element = document.getElementById("foo")
element2 = document.getElementById("foo2")
	if(inPos == 1){
		switch (foundElement) {   
			case 1 :       
				element.style.border="1px solid red"
				break;
			case 2 :       
				element2.style.border="1px solid red"
				break;
			}
		xlock = 1
	}
}

function unLockIt(){
element = document.getElementById("foo")
element2 = document.getElementById("foo2")
		switch (foundElement) {   
			case 1 :       
				element.style.border="1px solid blue"
				break;
			case 2 :       
				element2.style.border="1px solid blue"
				break;
			}
	xlock = 0
}
</script>

Drag i bilden precis nedanför det nedre högra hörnet...

<div id="foo2" style="position:absolute;top:350px; left:350px; width:120px; height:120px; overflow:hidden; border:1px solid blue;">
<center><img src="resize2.jpg" galleryimg="no"></center>
</div>

<div id="foo" style="position:absolute;top:50px; left:50px; width:120px; height:120px; overflow:hidden; border:1px solid blue;">
<center><img src="resize.jpg" galleryimg="no"></center>
</div>

Hjälp mig, snälla!

Try this.

<script>
document.onmousemove = cropIt
document.onmousedown = lockIt
document.onmouseup = unLockIt

xlock = 0;
inPos = 0;
element=false;

function cropIt(e){
x = (document.all)? event.x : e.pageX ;
y = (document.all)? event.y : e.pageY;

status=inPos
	if(!element){ return; }

	if( (element.offsetWidth - (x - parseInt(element.style.left))) < 0 &&
		(element.offsetWidth - (x - parseInt(element.style.left))) >-9 &&
		(element.offsetHeight - (y - parseInt(element.style.top))) < 0 &&
		(element.offsetHeight - (y - parseInt(element.style.top))) >-9 ){
			document.body.style.cursor="se-resize";
			inPos = 1;
	}
	else{
		document.body.style.cursor="default";
		inPos = 0;
	}
	if(xlock==1){
		element.style.width = x - parseInt(element.style.left)
		element.style.height = y - parseInt(element.style.top)
	}

	}

	function lockIt(){
		if(inPos == 1){
			xlock = 1
		}
	}
	function unLockIt(){
		xlock = 0
	}
</script>

Drag i bilden precis nedanför det nedre högra hörnet...

<div onmouseover="if(xlock==0){element=this}" id="foo" style="position:absolute;top:50px; left:50px; width:120px; height:120px; overflow:hidden; border:1px solid red;">
<img src="bild.jpg" galleryimg="no">
</div>

<div onmouseover="if(xlock==0){element=this}" id="bar" style="position:absolute;top:200px; left:200px; width:120px; height:120px; overflow:hidden; border:1px solid red;">
<img src="bild.jpg" galleryimg="no">
</div>

Tack,

det fungerar utmärkt.
ifs så funkar bara om man låter musen gå via objektet, men det kan jag nog acceptera.

det jag undrar över nu är om man skulle kunna få detta att fungera placerat relativt till andra div:ar, eller inuti en tabell?

Hur gör man då?