Creating draggable DIVs

Forum Moderators: open

Message Too Old, No Replies

Creating draggable DIVs

Wondering how to create JSON for dragging a DIV element

Tofudisan

10:21 pm on Mar 3, 2009 (gmt 0)

I'm trying to learn how to create a draggable DIV. While searching the forum boards I found the post at [webmasterworld.com...]

When I created the page as outlined in the thread the javascript doesn't appear to work. When I try to drag the DIVs they don't move. I've tried the script in IE7, FF3, and Chrome. FF3 with Firebug reports the following error.


dragndrop.edrag is null
http://localhost/ajax/test2.asp#
Line 41

I'm not familiar enough with JSON, or Javascript in general, to understand what's going on in with the code. Can anyone enlighten me?

httpwebwitch

8:59 pm on Mar 23, 2009 (gmt 0)

IMHO the script over there is incredibly confusing.

say you have your div, which has a unique ID like this:

<div id="mydiv">Drag me, please!</div>

Here's what I'd do:
1) go get a javascript library such as mootools [mootools.net]
2) put those library scripts on your page, in the <head>.
3) then make your <div> draggable using one line of JavaScript:

var dragme = new Drag($('mydiv'));

and you're done. Drag away.

the Drag object has all the options and properties you need to make it draggable, droppable, and trigger events onDrag, onDrop, onEnter, onLeave, etc. you'll save yourself hundreds of hours of debugging. Try it.