Hilfe
Neues Thema
Antworten
geschrieben ich bins schon wieder und war habe ich nun folgendes Problem:
Wir lernen ja im Moment DHTML aus einem Buch und dort befindet sich ein Quelltext, womit sich 2 Objekte hin und her bewegen lassen.
Wir sollen nun eine Seite schreiben wo man ein Rechteck hin und her bewegen kann.
Natürlich ist im Buch auch der Quelltext angegeben, sodass ich so abgeschrieben habe, dass ein Rechteck bewegt wird. So weit so gut, funktioniert ja auch alles, außer das in der Aufgabenstellung angegeben war, dass bei dem Code im Buch das zu bewegende Object, wenn es denn dann bewegt wird, sich nach der Maus ausrichtet, dies aber nun nicht mehr der Fall sein soll, also da wo ich das Object mit der Maus anfasse, soll die Maus auch stehen bleiben, sodass sich das Object nicht irgendwie nach der Maus ausrichtet:
Hier der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Aufgabe 10</title>
<script type="text/javascript">
var dragElem=null;
var dragging=false;
var first=true;
function setDrag(evt,elementID){
dragElem=getObj(elementID);
startDrag();
}
function startDrag() {
dragging=true;
document.onmousemove=dragObj;
document.onmouseup=dropObj;
}
function dragObj(evt) {
if (window.event){ evt = window.event; }
if (evt){
var x = evt.clientX;
var y = evt.clientY;
shiftTo(dragElem,x,y,1);
var pos = "drag coordinates are: " + x + ", " + y + ", " + 1;
window.status=pos;
}
return false;
}
function dropObj() {
dragging=false;
document.onmousemove=null;
document.onmouseup=null;
window.status="";
}
/*End Drag and Drop Script*/
/*Utility functions, place in codelibrary.js for future use.*/
/*Getting the width of an object*/
function getWidth(obj){
var theObj = getObj(obj);
if (theObj.clientWidth){
return parseInt(theObj.clientWidth);
}
if (theObj.offsetWidth){
return parseInt(theObj.offsetWidth);
}
}
/*Getting the Height of an object*/
function getHeight(obj){
var theObj = getObj(obj);
if (theObj.clientHeight){
return parseInt(theObj.clientHeight);
}
if (theObj.offsetHeight){
return parseInt(theObj.offsetHeight);
}
}
/* Convert object name string or object reference
into a valid object reference */
function getObj(elementID){
if (typeof elementID == "string") {
return document.getElementById(elementID);
}else{
return elementID;
}
}
/* Object Motion and Position Scripts */
/*This function places a positionable object (obj) in
three dimensions (x,y, and z).*/
function shiftTo(obj,x,y,z){
var newObj = getObj(obj);
newObj.style.left = x + "px";
newObj.style.top = y + "px";
newObj.style.zIndex = z;
}
</script>
<style type="text/css">
#thesquare { position:absolute; left:200px; top:200px;
width:100px; height:100px; background:red; }
</style>
</head>
<body>
<div id="thesquare" onmousedown="setDrag(event,this);"></div>
</body>
</html>
Die Zeilen, wo noch was geändert werden muss, werden wohl folgende sein:
var x = evt.clientX; var y = evt.clientY;
Vorher stand dort folgendes, damit euch mein Problem klarer wird:
var x = evt.clientX - parseInt(getWidth(dragElem)/2); var y = evt.clientY - parseInt(getHeight(dragElem)/2);
Könnt den Code in der Codebox ja mal so umändern und selber mal ausprobieren.
Nach oben
