[b][red]This message was edited by mac_doggie at 2005-4-5 12:9:25[/red][/b][hr]

I'm just figuring out how to use dragging in JavaScript, but It's not really working quite yet. I've been searching on the internet about Dragging in JavaScript but it seems that I'm the only programmer in the world that places comment in his code, and I don't seem to understand all the extreem programming methods some people use.

I'm hoping someone can help me out here and tell me how I can use dragging myself (I want to get to understand it and not just rip someone else his scripts...)

I tried some things like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


var ie=document.all;
var ff=document.getElementById&&!document.all;
var dragging = false;
var dragobject = null;
var x = 0;
var y = 0;

function drag(event) {
if(dragging) {
document.getElementById("d").style.left = (event.x - x)+'px';
document.getElementById("d").style.top = (event.y - y)+'px';
document.getElementById("d").innerHTML = "x="+(event.x)+", y="+ (event.y)+ "srcElement="+event.srcElement.id;


function dragon(event) {
if((!dragging) && (event.srcElement.id != 'body')){
dragging = true;
dragobject = event.srcElement;
x = event.offsetX;
y = event.offsetY;

function dragoff() {
if(dragging) {
dragging = false;
dragobject = null;



This doesn't seem to work in Firefox. Firefox doesn't seem to like most event properties....

I also noticed that some of the example scripts even get Firefox to change the mousepointer (like http://www.walterzorn.com/dragdrop/dragdrop_e.htm) I once tried using the cursor:hand in Css but that doesn't work with any other browser then IE. I'd also like to know how to do this in other browsers...

I have taken a look at the code of Walterzorn, but I can't make anything of it. I do like the way it works and I'd like to create something similar myself. The code I entered above doesn't drag as smoothly as Walterzorn his code does....

I hope someone can explain to me how to get to work and wich DOM objects and properties to use...

the Netherlands...


  • Well, Firefox doesn't support event.scrElement. It needs event.target, but IE doesn't support that, so to get the target you need something like
    targ = event.target || event.srcElement;

    It also doesn't have event.offsetX or event.x, or their corresponding ys. I'm not sure what they're supposed to do, but if they just get the mouse offset relative to the same place, you can use event.clientX/Y for both events. The only problem then is that each new drag will take the target element back to the corner - you can fix that by getting the position in the mousedown, and adding that to the style as well.

    The speed is probably caused by all the innerHTML chages you're making. Assuming those are for debugging purposes, it should be faster when you remove them.

    For the cursor, I think you want pointer rather than hand.
    $ shameless-plug

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!


In this Discussion