Drag & Drop: Zielelement
Alemarius Nexus
- javascript
Hallo erstmal,
gestern habe ich mir ein Tutorial zu Drag & Drop von beliebigen HTML Elementen mit JavaScript durchgelesen. Den Code habe ich in eine Klasse gefasst und es funktioniert soweit auch alles sehr gut. Nun möchte ich aber beispielsweise Elemente nur über bestimmten anderen Elementen 'ablegbar' machen. Wenn das gezogene Element nicht über einem bestimmten anderen Element losgelassen wird, wird es wieder an seine Ausgangsposition zurückgebracht. Mein Problem ist nun aber, dass ich nicht weiß, wie man das Element, über dem losgelassen wurde, findet.
Mit onmouseup am Zielelement klappt es nicht, weil während dem Dragging ja noch ein Element darüber liegt. Ich habe es auch damit versucht, die Position des Zielelements und seine Größe herauszufinden und zu prüfen, ob die Position des Mausklicks in diesem Gebiet liegt. Aber aus irgendeinem Grund bekomme ich dafür immer die falsche Y-Koordinate.
Gibt es ansonsten noch eine Möglichkeit, das Zielelement herauszufinden?
Danke im Vorraus
Lieber Alemarius,
ich habe Dein Problem für mich so gelöst, dass ich das zu verschiebende Element immer wieder unsichtbar schalte, damit das mouseover-Event feuern kann (welches ich dem <body> zugeordnet habe). Du kannst Dir das gerne einmal in meinem Quiz-Script anschauen.
Liebe Grüße,
Felix Riesterer.
Vielen Dank für deine Antwort. Nach einigem Rumprobieren hat es nun funktioniert. Allerdings dauert es bei 'großen' Elementen verhältnismäßig lange, sie wieder sichtbar zu machen. Bei Bildern zum Beispiel sieht das nicht schön aus, wenn man während dem Ziehen das Bild flackern sieht. Ich habe es so gemacht, dass nach dem Verstecken des Elementes mit window.setTimeout() nach einer Millisekunde die Eigenschaft zurückgesetzt wird. Ist das richtig so? Kann man die Performance noch irgendwie verbessern, oder muss ich das in Kauf nehmen?