drag image

Discussion in 'JavaScript' started by cjfmagnusson, Jan 1, 2008.

0
  1. #1
    I have an image, which i want to move with the mouse. But just in vertical direction. This runs good, but I also want the image to be moved just 150px downwards (from the first position) and not upwards at all. And I don't know how to write it. This is my js code:
    
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
if (isdrag)
{
dobj.style.top = nn6 ? ty + e.clientY - y + "px" : ty + event.clientY - y + "px";
return false;
}
} 

function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
ty = parseInt(dobj.style.top+0,10);
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}

if (navigator.appName!="Microsoft Internet Explorer")
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
    Code (markup):
    And in the <body> tag:

    <img src="img/header2.png" width="700" height="172" class="dragme" onMouseDown="selectmouse()" >
    Code (markup):
    What to write to solve my problem?

    PS. I'm sorry for my english and my javascript too ;) but I hope you can understand.
     
    cjfmagnusson, Jan 1, 2008 IP
  2. fahlyn

    fahlyn Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I would recommend using http://script.aculo.us/. It's got a really great drag and drop system that should be able to handle everything you need to do. It is really easy to use and takes care of all cross browser issues for you.
     
    fahlyn, Jan 2, 2008 IP