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 @ 05.06.08 11:27

Skift function navnet på onmousemove

Bruger #11328 @ 05.06.08 16:19

1.323

Følgende kode virker ikke:

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 startObject(objectID)
{
    isMouseUp = false;
    object = document.getElementById(objectID);
}

function stopObject(moveObject)
{
    isMouseUp = true;
}

function moveObject(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:startObject(this.id);" onmousemove="javascript:moveObject()" onmouseup="javascript:stopObject(this.id);"></div>
</body>
</html>

Fejlen er: event is not defined. Og den henviser til e=e||event;

Bruger #11596 @ 05.06.08 18:59

moveObject() skal være moveObject(event)

Bruger #11328 @ 05.06.08 20:24

1.323

Det virkede lige, men så gjorde jeg et eller andet, og nu virker det ikke

Kode

<html>
<head>
<title>Drag Object JS</title>
<style type="text/css">
*
{
    margin: 0px;
    padding: 0px;
}
</style>

<script type="text/javascript">

document.onmousemove = getMousePos;

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

function getMousePos(e)
{
    mousePosX = e.PageX;
    mousePosY = e.PageY;
}

function startObject(objectID)
{
    isMouseUp = false;
    object = document.getElementById(objectID);
    object.style.opacity = "0.5";
    if(object.style.left == "")
    {
    object.style.left = "0px";
    object.style.top = "0px";
    }

    mouse_objectOffsetX = mousePosX - object.style.left;
    mouse_objectOffsetY = mousePosY - object.style.top;

}

function stopObject()
{
    isMouseUp = true;
    object.style.opacity = "1.0";
    object = 0;
}

function moveObject(e)
{
    if(object != 0)
    {
        if(isMouseUp === false)
        {
            e=e||event;
            object.style.left = mousePosX - mouse_objectOffsetX + "px";
            object.style.top = mousePosY - mouse_objectOffsetY + "px";
        }
    }
}

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

<< < 1 2 > >>

Drag object fejl...

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler