[JS/DHTML] DIV mit onclick bewegen

CPU · 29. Oktober 2007

Hi,

dort unten seht Ihr ein Skript, dass einen div-Bereich enthält, der sich mit der Maus bewegt! Alles schön und gut, aber: Ich möchte, dass sich der div-Bereich nur dann mit dem Mauszeiger mitbewegt, wenn man in den div-Bereich "onm" klickt!

Das kommt mir irgentwie schwer vor. Rein logisch kein Problem, doch wie soll man das umsetzen?

Ich hatte schon überlegt, ob man anstatt "onmousemove" das Attribut "onmousedown" nimmt und irgendwie mit "onmouseclick" verkettet ... ?

Vielen Dank im Vorraus,
CPU

HTML:

<html><head>
</head><body>
<script language="JavaScript">
<!--
document.onmousemove=mouseMove;
function mouseMove(e){
	var x,y;
	if (!document.all) {
	x=e.clientX;
        y=e.clientY;
	} else {
	x=event.clientX;
        y=event.clientY;
        }
        document.getElementById("window").style.left = x;
        document.getElementById("window").style.top = y;
	document.title="x=" + x + ";y=" + y;
}
//-->
</script>
<div style="position: absolute;border: solid 1px;height: 200px;width: 200px;" id="window">
<div id="onm" style="cursor:pointer;border: solid 1px; height:50px;"><div>
<h2>A window</h2>
</div>
</body></html>

Flyde · 29. Oktober 2007

Hm also sowas hab ich jetzt noch nicht versucht (bin auch noch nich lange bei js ^^) aber ich würds mal damit versuchen, die funktion nicht beim bewegen der maus aufzurufen..

Ich würde es so versuchen:
- beim div onm

Code:

<div id="onm" style="cursor:pointer;border: solid 1px; height:50px;" onMouseDown="[B]mouseMove()[/B]"><div>

- dann beim js document.onmousemove=mouseMove; raus, damits nicht automatisch passiert und die funktion ein wenig anpassen

Ich hoffe ich bin auch aufm richtigen weg.. kannst es ja mal testen, ansonsten wirds dir n spezi sichersagen wies geht

CPU · 30. Oktober 2007

Hmmm,

im IE klappts nur bei Seitenanklick ... und im MF garnicht!

Meineserachtens muss man wenn man das ganze angeklickt hat immer wieder die Position erneuern ...

Hilfeeeee

CPU

CPU · 30. Oktober 2007

Vielleicht kann man diesen Code umfuktionieren:

HTML:

<html>
 <head>
 <title>Drag&Drop</title>
<style>
 .drag {
  position:relative;
  cursor:move;
  z-index:0
 }
</style>
<script type="text/javascript">
/* by homepage-total */
 function move(){
 if (event.button==1&&dragapproved){
 z.style.pixelLeft=temp1+event.clientX-x
 z.style.pixelTop=temp2+event.clientY-y
 return false}
 }

 function drags(){
 if (!document.all)
 return
 if (event.srcElement.className=="drag"){
 dragapproved=true
 z=event.srcElement
 temp1=z.style.pixelLeft
 temp2=z.style.pixelTop
 x=event.clientX
 y=event.clientY
 document.onmousemove=move}
 }

 document.onmousedown=drags
 document.onmouseup=new Function("dragapproved=false")
</script>
</head>
<body>
 <div style="position:absolute; left: 200px; top: 200px"><h1 class="drag" id="a">A</h1></div>
 <div style="position:absolute; border: solid 1px; width: 100px; height: 100px; left: 20px; top: 20px"></div>
</body>
</html>

Leider ist er nicht MF kompatibel ...

CPU · 30. Oktober 2007

Hallo,

ich hab's: der Folgende Code funktioniert unter IE und MF. Man kann den 2.div-Bereich über den Bildschirm ziehen ...

Aber: Es ist ein Fehler in dem ganzen: Wenn man an dem 2.div-Bereich zieht, bewegt sich nur dieser weg, aber nicht der andere Vater-div-Bereich ...

Was muss am Skript geändert werden, damit sich auch der Vater-div-Bereich mitbewegt, wenn man am inneren div-Bereich zieht?

HTML:

<script>
document.onmousemove = mouseMove;
document.onmouseup   = mouseUp;

var dragObject  = null;
var mouseOffset = null;


function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
}

function mouseCoords(ev){
	if(ev.pageX || ev.pageY){
		return {x:ev.pageX, y:ev.pageY};
	}
	return {
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	};
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);
	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e){
	var left = 0;
	var top  = 0;

	while (e.offsetParent){
		left += e.offsetLeft;
		top  += e.offsetTop;
		e     = e.offsetParent;
	}

	left += e.offsetLeft;
	top  += e.offsetTop;

	return {x:left, y:top};
}

function mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	if(dragObject){
		dragObject.style.position = 'absolute';
		dragObject.style.top      = mousePos.y - mouseOffset.y;
		dragObject.style.left     = mousePos.x - mouseOffset.x;

		return false;
	}
}
function mouseUp(){
	dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	item.onmousedown = function(ev){
		dragObject  = this;
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

</script>

  <div style="border:solid 1px; width: 200px;height: 200px;">
  <div onmouseover="makeDraggable(this);" style="border:solid 1px; width: 200px;height: 20px;"><h2>A</h2></div>
  <h1>Hallo</h1>
  </div>

Suche

CPU

Lieutenant

Flyde

Cadet 4th Year

CPU

Lieutenant

CPU

Lieutenant

CPU

Lieutenant

Ähnliche Themen