✔ problem mit drag and drop

S

shadowking

Grünschnabel
es geht um ein drag und drop script

ein div element soll sich bewegen wenn auf ein "bewegungs-mauszeiger" geklickt wird und dann die maus so gezogen wird
An sich funktioniert das ganze
nur manchmal funkt im firefox und im IE dazwischen

es wird dann das Bild des mauszeigers als bild weggezogen im firefox oder im IE der Mauszeiger makiert
In dem fall wird die onmousemove und onmouseup methode vollkommen ignoriert
ist es möglich dies zu umgehen?
 
es geht um ein eigenes drag and drop script

es funktioniert ja
nur das beim ziehen manchmal dieser fehler auftritt, dass das bild gezogen wird und nicht die onmousemove methode verwendet wird
in dem fall wird auch die onmouseup methode ignoriert
und das dragen wird nicht richtig beendet, so dass es zu fehlern kommt
 
Mit meiner Frage wollte ich darauf hinaus, dass du uns schon den Script-Code zeigen mußt, damit darauf auch näher eingegangen werden kann.

Und achte bitte in deinen Folgebeiträgen auf die Netiquette bzgl. der erwünschten Groß- und Kleinschreibung. Vielen Dank! :)

mfg Maik
 
Dies ist der javascript-teil:

Code: 
var altx,alty;
altx = 0;
alty = 0;
var object;
var left,top;

function mouseup(){
	altx = 0;
	alty = 0;
}
function ToogleDrag(obj,event){
	if(altx == 0){
		altx = event.clientX;
	}else{
		altx = 0;
	}
	if(alty == 0){
		alty = event.clientY;
	}else{
		alty = 0;
	}
}
function drag(obj,event){
	if(altx > 0 && alty > 0){
		object = obj.offsetParent;
		left = object.style.left.substr(0,object.style.left.indexOf('px'));
		top = object.style.top.substr(0,object.style.top.indexOf('px'));
		object.style.left = (parseInt(left) + event.clientX - altx) + "px";
		object.style.top = (parseInt(top) + event.clientY - alty) + "px";
		altx = event.clientX;
		alty = event.clientY;
	}
}

Hier ist eines der divs die bewegt werden sollen:
HTML: 
<div id="container1" style="position:absolute;left:50px;top:50px;width:200px;height:200px;">
<div name="drag" onmousedown="ToogleDrag(this,event);" onmousemove="drag(this,event);"  onmouseup="ToogleDrag(this,event)";  style="background-image:url(./drag.png);width:20px;height:20px;"></div>
</div>

Ich habe versucht dieses Problem, da es mir durch aus schon bekannt ist versucht dadurch zu umgehen, dass ich background-image verwende statt das Bild mit einem img-tag anzuzeigen.
Die mouseup Funktion wird im body beim onmouseup aufgerufen
und soll als letzte Sicherheit gilten in dem Fall, dass der Benutzer die Maus zu schnell bewegt und so nicht wahrgenommen wurde, dass die Maus auf dem div los gelassen wurde

Für alle die sich das ganze ansehen wollen hier der link:
http://simjen.si.funpic.de/javascript/drag.html

Ja dort ist noch ein bischen was anderes drin, dass noch nicht drin ist.
 
Ein Update:
Ich habe das ganze um einiges flüßiger Hinbekommen

Allerdings wenn ich versuche ein div zweilman hintereinander zu draggen kommt es zu Problemen...

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
	#container1{
		position:absolute;
		background-color:rgb(255,255,255);
		border:1px solid #000000;
		width:200px;
		height:200px;
		left:50px;
		top:50px;
	}
	#container2{
		position:absolute;
		background-color:rgb(255,255,255);
		border:1px solid #000000;
		width:200px;
		height:200px;
		left:200px;
		top:200px;
	}
	.drag{
		cursor:move;
		position:absolute;
		background-image:url(./drag.png);
		width:20px;
		height:20px;
	}
	.resize{
		position:absolute;
		background-image:url(./resize.png);
		width:20px;
		height:20px;
	}
</style>
<script type="text/javascript">
var altx,alty;
altx = 0;
alty = 0;
var object;
var left,top;
var wid,hei;
var dragobject;
var resizeobject;
function selectDrag(obj,event){
	dragobject = obj;
	altx = event.clientX;
	alty = event.clientY;
}

function releasedrag(){
	dragobject = null;
	resizeobject = null;
	altx = 0;
	alty = 0;
}
function drag(e){
	if(dragobject){
		object = dragobject.offsetParent;
		left = object.style.left.substr(0,object.style.left.indexOf('px'));
		top = object.style.top.substr(0,object.style.top.indexOf('px'));
		object.style.left = (parseInt(left) + e.clientX - altx) + "px";
		object.style.top = (parseInt(top) + e.clientY - alty) + "px";
		altx = e.clientX;
		alty = e.clientY;
	}
}
</script>
</head>
<body onmousemove="drag(event);" onmouseup="releasedrag();" >
<div id="container1" style="left:50px;top:50px;width:200px;height:200px;">
<div class="drag" id="drag" style="left:175px;top:5px;" onmousedown="selectDrag(this,event);"></div>
<div class="resize" style="left:180px;top:180px;"></div>
</div>
<div id="container2" style="left:200px;top:200px;width:200px;height:200px;">
<div class="drag" id="drag" style="left:175px;top:5px;" onmousedown="selectDrag(this,event);"></div>
<div class="resize" style="left:180px;top:180px;"></div>
</div>

</body>
</html>
 
Hi,

ein ID-Bezeichner muß im Dokument eindeutig sein:

Code: 
<div id="container1" style="left:50px;top:50px;width:200px;height:200px;">
<div class="drag" id="drag" style="left:175px;top:5px;" onmousedown="selectDrag(this,event);"></div>
<div class="resize" style="left:180px;top:180px;"></div>
</div>
<div id="container2" style="left:200px;top:200px;width:200px;height:200px;">
<div class="drag" id="drag" style="left:175px;top:5px;" onmousedown="selectDrag(this,event);"></div>
<div class="resize" style="left:180px;top:180px;"></div>
</div>


mfg Maik
 
Maik hat gesagt.:
Hi,

ein ID-Bezeichner muß im Dokument eindeutig sein:

Code: 
<div id="container1" style="left:50px;top:50px;width:200px;height:200px;">
<div class="drag" id="drag" style="left:175px;top:5px;" onmousedown="selectDrag(this,event);"></div>
<div class="resize" style="left:180px;top:180px;"></div>
</div>
<div id="container2" style="left:200px;top:200px;width:200px;height:200px;">
<div class="drag" id="drag" style="left:175px;top:5px;" onmousedown="selectDrag(this,event);"></div>
<div class="resize" style="left:180px;top:180px;"></div>
</div>


mfg Maik
Zum Vergrößern anklicken....

Ich weiß das....
aber in diesem Fall spielt das keine Rolle, da ich den div nicht mal mit javascript auswähle und nicht einmal die Stylecheets darauf zugreifen
 
Maik hat gesagt.:
Wenn du das weißt, wieso agierst du dann nicht so?

Woher sollen wir schliesslich wissen, dass dir diese Regel bekannt ist.

D'rum hab ich hier auch vorsorglich auf den Fehler hingewiesen.

mfg Maik
Zum Vergrößern anklicken....

Naja ich habe erst einen geschrieben und dann den kopiert
und dann habe ich ausversehen die zweite Id übersehen

Ich habe die Ids nun verändert aber das Problem ist das gleiche

Jemand anderes hat mir geholfen.
Für alle die es interessiert:
Man muss in das drag-div ein text-node einfügen (auch wenn es leer ist)
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück