javascript - Drag object fejl... - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

<< < 1 2 > >>

Bruger #11328 @ 04.06.08 23:15

Hej allesammen!
Jeg har prøvet at lae mig et lille drag miljø, men det virker desværre ikke. Den røde div bevæger sig ikke. Og Firebug kommer ikke med fejl.

Mit mini-miljø:

Kode

<html>
<head>
<title>Drag Object JS</title>
<script type="text/javascript">

// Events:
document.onmousemove = getMousePos;

// Globals:
var mousePosX = 0;
var mousePosY = 0;
var mouse_objectOffsetX = 0;
var mouse_objectOffsetY = 0;
var objectTop = 0;
var objectLeft = 0;
var isMouseUp = false;



function getMousePos(e)
{
    mousePosX = e.pageX;
    mousePosY = e.pageY;
}

function moveObject(objectID)
{
    isMouseUp = false;
    var object = document.getElementById(objectID);

    while(isMouseUp == false)
    {
    objectLeft = object.style.left;
    objectTop = object.style.top;
    mouse_objectOffsetX = objectLeft - mousePosX;
    mouse_objectOffsetY = objectTop - mousePosY

    object.style.left = mousePosX;
    object.style.top = mousePosY;
    }
}

function stopObject(moveObject)
{
    isMouseUp = true;
}

</script>
</head>
<body>
<div style="width: 45px; height: 45px; background-color: red;" id="red_box" onmousedown="javascript:moveObject(this.id);" onmouseup="javascript:stopObject(this.id);"></div>
</body>
</html>

Indlæg senest redigeret d. 04.06.2008 23:18 af Bruger #11328

Bruger #11596 @ 04.06.08 23:19

Du har skrevet:
object.left = mousePosX;
object.top = mousePosY;
Det skal være:
object.style.left = mousePosX;
object.style.top = mousePosY;

Bruger #11328 @ 04.06.08 23:23

1.323

Det er rettet

Bruger #11328 @ 04.06.08 23:23

1.323

Det er rettet, og virker stadig ikke... se i koden

Bruger #11596 @ 04.06.08 23:24

I stedet for at have denne kode:
while(isMouseUp == false)
{
objectLeft = object.style.left;
objectTop = object.style.top;
mouse_objectOffsetX = objectLeft - mousePosX;
mouse_objectOffsetY = objectTop - mousePosY

object.style.left = mousePosX;
object.style.top = mousePosY;
}
så brug onmousemove så i din div skrive du onmousemove="onmousemove();"
og din onmousemove ser sådan her ud:

Kode

function onmousemove(){
    if(isMouseUp === false) {
        objectLeft = object.style.left;
        objectTop = object.style.top;
        mouse_objectOffsetX = objectLeft - mousePosX;
        mouse_objectOffsetY = objectTop - mousePosY

        object.style.left = mousePosX;
        object.style.top = mousePosY;
    }
}

skulle virke er ikke testet

Indlæg senest redigeret d. 04.06.2008 23:25 af Bruger #11596

Bruger #11328 @ 04.06.08 23:29

1.323

Koden ser nu sådan ud:

Kode

<html>
<head>
<title>Drag Object JS</title>
<script type="text/javascript">

// Events:
document.onmousemove = getMousePos;

// Globals:
var mousePosX = 0;
var mousePosY = 0;
var mouse_objectOffsetX = 0;
var mouse_objectOffsetY = 0;
var objectTop = 0;
var objectLeft = 0;
var isMouseUp = true;
var object;



function getMousePos(e)
{
    mousePosX = e.pageX;
    mousePosY = e.pageY;
}

function moveObject(objectID)
{
    isMouseUp = false;
    object = document.getElementById(objectID);
}

function stopObject(moveObject)
{
    isMouseUp = true;
}

function onmousemove(){
if(isMouseUp === false) {
    objectLeft = object.style.left;
    objectTop = object.style.top;
    mouse_objectOffsetX = objectLeft - mousePosX;
    mouse_objectOffsetY = objectTop - mousePosY

    object.style.left = mousePosX;
    object.style.top = mousePosY;
}
    }

</script>
</head>
<body>
<div style="width: 45px; height: 45px; background-color: red;" id="red_box" onmousedown="javascript:moveObject(this.id);" onmousemove="onmousemove()" onmouseup="javascript:stopObject(this.id);"></div>
</body>
</html>

Og Firebug brokker sig over: Too much recursion...

Bruger #11596 @ 04.06.08 23:34

JScript kode

 // Globals:
 var mousePosX = 0;
 var mousePosY = 0;
 var mouse_objectOffsetX = 0;
 var mouse_objectOffsetY = 0;
 var objectTop = 0;
 var objectLeft = 0;
 var isMouseUp = true;
 var object;
 
 
 function moveObject(objectID)
 {
     isMouseUp = false;
     object = document.getElementById(objectID);
 }
 
 function stopObject(moveObject)
 {
     isMouseUp = true;
 }
 
 function onmousemove(e){
 if(isMouseUp === false) {
     e=e||event;
     mousePosX = e.pageX;
     mousePosY = e.pageY;
     objectLeft = object.style.left;
     objectTop = object.style.top;
     mouse_objectOffsetX = objectLeft - mousePosX;
     mouse_objectOffsetY = objectTop - mousePosY
 
     object.style.left = mousePosX;
     object.style.top = mousePosY;
 }
 }

Bruger #11328 @ 04.06.08 23:39

1.323

Samme fejl.
Når man så klikker på plusset i Firebug kommer der en milliard mousemove(undefined), og til sidst en ala mousemove(mousemove clientX = 0 clientY = 0)

Bruger #11596 @ 05.06.08 00:21

Den her kode virker:

Kode

<script>// Globals:
var mousePosX = 0;
 var mousePosY = 0;
 var mouse_objectOffsetX = 0;
 var mouse_objectOffsetY = 0;
 var objectTop = 0;
 var objectLeft = 0;
  var isMouseUp = true;
    var object;
  
  
   function moveObject(e,id)
   {
   e=e||event;
	isMouseUp = false;
	 mousePosX = e.pageX;
   mousePosY = e.pageY;
	object = document.getElementById(id);
   }
  
   function stopObject(moveObject)
   {
   isMouseUp = true;
   }
  
   function onMousemove(e,id){
   e=e||event;
   object = document.getElementById(id);
   mouse_objectOffsetX = mousePosX-e.pageX;
   mouse_objectOffsetY = mousePosY-e.pageY;
   mousePosX = e.pageX;
   mousePosY = e.pageY;
   object.style.left = (parseInt(object.style.left)?parseInt(object.style.left):0)-mouse_objectOffsetX;
   object.style.top = (parseInt(object.style.top)?parseInt(object.style.top):0)-mouse_objectOffsetY;
   }
</script>
<div style="position:absolute;top:40;left:40;width: 45px; height: 45px; background-color: red;" id="red_box" onmousedown="moveObject(event,this.id);" onmouseup="stopObject(this.id)" onmousemove="if(isMouseUp === false)onMousemove(event,this.id);"></div>

Men du bliver nødt til at sætte position: absolute;

Bruger #10216 @ 05.06.08 08:51

4.283

husk at der skal angives px ved top,left,right,bottom,width og height. Ellers vil firefox ikke læse størrelserne rigtigt.

Bruger #11328 @ 05.06.08 09:30

1.323

Hmmm, ja følgende kode virker:

Kode

<html>
<head>
<title>Drag Object JS</title>
<script type="text/javascript">

// Events:
document.onmousemove = getMousePos;

// Globals:
var mousePosX = 0;
var mousePosY = 0;
var mouse_objectOffsetX = 0;
var mouse_objectOffsetY = 0;
var objectTop = 0;
var objectLeft = 0;
var isMouseUp = true;
var object;
var lessRec = 0;



function getMousePos(e)
{
    mousePosX = e.pageX;
    mousePosY = e.pageY;
}

function moveObject(objectID)
{
    isMouseUp = false;
    object = document.getElementById(objectID);
}

function stopObject(moveObject)
{
    isMouseUp = true;
}

function onmousemove(e){
if(isMouseUp === false) {
e=e||event;
mousePosX = e.pageX;
mousePosY = e.pageY;
objectLeft = object.style.left;
objectTop = object.style.top;
mouse_objectOffsetX = objectLeft - mousePosX;
mouse_objectOffsetY = objectTop - mousePosY
object.style.left = mousePosX + "px";
object.style.top = mousePosY + "px";
}
}

</script>
</head>
<body>
<div style="position: absolute; width: 45px; height: 45px; background-color: red;" id="red_box" onmousedown="javascript:moveObject(this.id);" onmousemove="onmousemove()" onmouseup="javascript:stopObject(this.id);"></div>
</body>
</html>

Havde glemt både px og position: absolute.

men den brokker sig stadig over (og med god grund for den hakker) når man bevæger diven "ned over skærmen" altså forøger X og Y positionerne (Too much recursion). Hvis man tager den op ad skærmen eller til venstre, så X og Y bliver mindre hakker den ikke....? Hvad er problemet?

<< < 1 2 > >>

Drag object fejl...

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler