nicht angemeldet
removeEventListener
Hallo,
ich hab versucht, das Beispiel zu drag & drop in ein zeitgemäßeres JS zu packen. Test1 funktioniert. Dann hab ich mir gedacht, dass ich die EventListener für das document ja auf Bedarf adden bzw. removen könnte. Jetzt hat der Mauszeiger zum Quadrat aber einen Versatz(Test2) und das verstehe ich nicht... dragDropHandler bleibt doch dasselbe "Objekt", oder?
Grüße
Siri
PS: Ich weiß, dass addEventListener und removeEventListener nicht von allen Browsern verstanden wird. Außerdem gehört CSS in ein separates File.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; ">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
<title>Javascript</title>
<style type="text/css">
BODY {
position: relative;
top: 0px;
left: 0px;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
DIV.quadrat1 {
top: 20px;
left: 20px;
position: absolute;
height: 50px;
width: 50px;
background-color: #EFEFEF;
}
DIV.quadrat2 {
top: 80px;
left: 20px;
position: absolute;
height: 50px;
width: 50px;
background-color: #EFEFEF;
}
</style>
</head>
<body>
<div class="quadrat1" id="quadrat1">A B C</div>
<div class="quadrat2" id="quadrat2">D E F</div>
<script>
var Test1 = (function () {
var dragDropHandler;
return {
init: function () {
dragDropHandler = new DragDrop();
var dragElement = document.getElementById("quadrat1");
dragElement.addEventListener("mousedown", dragDropHandler.dragStart, false);
document.addEventListener("mouseup", dragDropHandler.dragStop, false);
document.addEventListener("mousemove", dragDropHandler.dragIt, false);
}
}
function DragDrop() {
var dragElementLocal = null;
var dragX = 0;
var dragY = 0;
var posX = 0;
var posY = 0;
this.dragStart = function () {
dragElementLocal = this;
dragX = posX - dragElementLocal.offsetLeft;
dragY = posY - dragElementLocal.offsetTop;
}
this.dragStop = function () {
dragElementLocal = null;
}
this.dragIt = function (e) {
posX = (document.layers || (document.getElementById && !document.all)) ? e.pageX : document.body.scrollLeft + event.clientX;
posY = (document.layers || (document.getElementById && !document.all)) ? e.pageY : document.body.scrollTop + event.clientY;
if (dragElementLocal != null) {
dragElementLocal.style.left = (posX - dragX) + "px";
dragElementLocal.style.top = (posY - dragY) + "px";
}
}
}
})();
Test1.init();
var Test2 = (function () {
var dragDropHandler;
return {
init: function () {
dragDropHandler = new DragDrop();
var dragElement = document.getElementById("quadrat2");
dragElement.addEventListener("mousedown", dragDropHandler.dragStart, false);
}
}
function DragDrop() {
var dragElementLocal = null;
var dragX = 0;
var dragY = 0;
var posX = 0;
var posY = 0;
this.dragStart = function () {
dragElementLocal = this;
dragX = posX - dragElementLocal.offsetLeft;
dragY = posY - dragElementLocal.offsetTop;
document.addEventListener("mouseup", dragDropHandler.dragStop, false);
document.addEventListener("mousemove", dragDropHandler.dragIt, false);
}
this.dragStop = function () {
dragElementLocal = null;
document.removeEventListener("mouseup", dragDropHandler.dragStop, false);
document.removeEventListener("mousemove", dragDropHandler.dragIt, false);
}
this.dragIt = function (e) {
posX = (document.layers || (document.getElementById && !document.all)) ? e.pageX : document.body.scrollLeft + event.clientX;
posY = (document.layers || (document.getElementById && !document.all)) ? e.pageY : document.body.scrollTop + event.clientY;
dragElementLocal.style.left = (posX - dragX) + "px";
dragElementLocal.style.top = (posY - dragY) + "px";
}
}
})();
Test2.init();
</script>
</body>
</html>
-
ich hab versucht, das Beispiel zu drag & drop in ein zeitgemäßeres JS zu packen.
2 mal der gleiche Code ist aber nicht zeitgemäß!
Jetzt hat der Mauszeiger zum Quadrat aber einen Versatz(Test2) und das verstehe ich nicht... dragDropHandler bleibt doch dasselbe "Objekt", oder?
dein mousemove wird nicht rechtzeitig ausgeführt und deswegen sind im startDrag noch posX und posY 0
-
Hallo,
ich hab versucht, das Beispiel zu drag & drop in ein zeitgemäßeres JS zu packen.
Zukunftweisendes Drag&Drop könnte dich interessieren ;)
-
Hallo,
Zukunftweisendes Drag&Drop könnte dich interessieren ;)
Das interessiert mich sogar sehr! :-)
Grüße
Siri
-