nicht angemeldet
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>