Dragging - Programmers Heaven

Howdy, Stranger!

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

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Dragging

mac_doggiemac_doggie Posts: 488Member
[b][red]This message was edited by mac_doggie at 2005-4-5 12:9:25[/red][/b][hr]
Hi,

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:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


test

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;
}
}



bla



[/code]

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...


;-)
-mac-
mailto:[email protected]
the Netherlands...



Comments

  • WeirdofreakWeirdofreak Posts: 439Member
    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.
    ^D
    $ shameless-plug
    http://line-ed.sourceforge.net

Sign In or Register to comment.