Flytte element i FF.
Hejsa folkens.Jeg er begyndt at programmere et Drag'n'drop jeg skal benytte på et internt webprogram. Jeg vil helst gerne selv bygge skidtet fra bunden, og vil helst ikke begynde på jQuery. Ja, er sikkert lidt underlig, men lad nu det ligge :)
Til at begynde med ville jeg blot lave et element jeg kan flytte ved at holde musen nede og flytte dette. Og jeg har da sådan set også fået bikset noget sammen. Dog kan man ikke ligefrem det virker optimalt i FF (5.0 i OS X 10.6). Hver anden gang flytter den ikke boksen, men ja. Laver den gennemsigtigte Firefox drag ting.
Dog ser det ud til at virke fint i Safari.
Men kan jeg måske få den til at køre en smule bedre på en eller anden måde.
Det jeg er kommet frem til kan ses hér: http://jenskjeldsted.dk/test.htm
Kildekode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#boks {
background-color:#FF0000;
height:200px;
width:200px;
}
</style>
<script type="text/javascript">
var mouse_stat = false;
document.onmousedown = set_var;
document.onmouseup = reset_var;
function set_var()
{
mouse_stat = true;
}
function reset_var()
{
mouse_stat = false;
}
function load_func()
{
document.onmousemove = track;
document.getElementById("boks").onmousemove = move;
}
function track(e)
{
var position = new Array();
position["x"] = e.pageX;
position["y"] = e.pageY;
document.getElementById("x").innerHTML = position["x"];
document.getElementById("y").innerHTML = position["y"];
}
function move(e)
{
var position = new Array();
position["x"] = e.pageX;
position["y"] = e.pageY;
if(mouse_stat) document.getElementById("boks").style.marginLeft = position["x"]-100 + "px";
if(mouse_stat) document.getElementById("boks").style.marginTop = position["y"]-100 + "px";
}
</script>
</head>
<body onLoad="load_func()">
<div id="x">x<br></div>
<div id="y">y</div>
<div id="boks"></div>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#boks {
background-color:#FF0000;
height:200px;
width:200px;
}
</style>
<script type="text/javascript">
var mouse_stat = false;
document.onmousedown = set_var;
document.onmouseup = reset_var;
function set_var()
{
mouse_stat = true;
}
function reset_var()
{
mouse_stat = false;
}
function load_func()
{
document.onmousemove = track;
document.getElementById("boks").onmousemove = move;
}
function track(e)
{
var position = new Array();
position["x"] = e.pageX;
position["y"] = e.pageY;
document.getElementById("x").innerHTML = position["x"];
document.getElementById("y").innerHTML = position["y"];
}
function move(e)
{
var position = new Array();
position["x"] = e.pageX;
position["y"] = e.pageY;
if(mouse_stat) document.getElementById("boks").style.marginLeft = position["x"]-100 + "px";
if(mouse_stat) document.getElementById("boks").style.marginTop = position["y"]-100 + "px";
}
</script>
</head>
<body onLoad="load_func()">
<div id="x">x<br></div>
<div id="y">y</div>
<div id="boks"></div>
</body>
</html>
På forhånd tak for hjælp.
