RE: DHTML Drag and Drop to reorder record set
I'm not a DHTML guy by any means. Could someone point me in the right
direction to figuring out how to use DHTML to take a record from within a
record set, drag it to a higher or lower position, and have it change its
position within the record set?
Guy,
I recently set up a drag-and-drop system for moving terms around within a
taxonomy structure at a library.I used _javascript_.Requires a bit of
doing, but it works really well.I won't go into all the detail, but
hopefully I can give you enough to get you started.If you need more, let
me know.
The basic idea is that each drag and drop event triggers a
location.replace() to a new page which processes data in the URL and
location.replace()s back to the start page.To the user, the effect is that
an operation takes place without leaving the start page.
To make this work, you need to understand the _javascript_ drag-and-drop
events, paying particular attention to which element fires the event.
onDragOver
onDragEnter
onDragStart
onDragEnd
onDrop
There might be a couple of others, but these are the ones I used.
On entering the page, I set a global variable that stores the ID of the
element being dragged, first with a dummy value (var dragID = -1;).This
global ID is intended to be the place to check what element is being
dragged.So, you have to set the onDragStart event to trigger a change in
that global variable.If, for example, you have a hyperlinked task item
with unique ID 645, you can add >
to the a tag.In enableTermDrop(), you set that global variable (dragID)
to #TaskItemID#, or 645.Similarly, onDragEnd, you run a routine like
disableTermDrop() that sets dragID back to -1.Now, whatever is happening,
you always have the ID of the item currently being dragged in dragID.
Next, you set the onDrop event of the target elements (those onto which
other elements are dropped) to fire something like launchTermDrop().Pass
the ID of the target element as an argument.That way, launchTermDrop() has
the target (from that argument) and the element that is being dragged and
dropped (by reading global variable dragID), and you are in business.Build
a URL to a page that knows what to do and location.replace() to that URL.
You can make this much more sophisticated by adding more global variables to
store other parameters pertaining to the term being dragged.This will
usually involve adding many more arguments to the event-driven function
calls.
VERY IMPORTANT: develop a naming convention early, and stick to it
religiously.With the terms drag and drop flying around, and with seven
total events that are triggered by different items, this will get confusing
very fast.I used the convention drag{VARIABLENAME} for the item being
dragged, and target{VARIABLENAME} for the target element.
Finally, to get really fancy, you can add keypress sensitivity to the
launchTermDrop() routine.This will let you handle the drop differently if
the user is holding down the Ctrl key, for example.
A bit confusing, but VERY MUCH WORTH IT.You end up with a very slick app.
If the tasks being performed are at all repetitive, you get a huge increase
in productivity.What used to take several mouse clicks and keystrokes will
now take one drag and drop.
Good luck!
Matthieu
[Todays Threads]
[This Message]
[Subscription]
[Fast Unsubscribe]
[User Settings]
[Donations and Support]
RE: DHTML Drag and Drop to reorder record set
Hi Matthieu, That's exactly the launching pad I was hoping for. Not to mention the exact same functionality that I am going for. Your description is excellent and concise. Might you think of doing a tutorial on it for other folks? Thanks again. ~Guy [Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings] [Donations and Support]
Re: DHTML Drag and Drop to reorder record set
Basically what I have is like a to do list. But lets say I want to take item #5 and drop it between item #2 and #3 so it becomes the new #3 and the old #3 becomes #4 and so on. I think in your case, I wouldn't use true drag'n drop, I mean drag events. Drag events are really to copy some content and paste it some where else. In your case, what you want to do is just identify an element in an array and rearrange that array depending where you drop the element. Just use mousedown event to identify the element being dragged, change the cursor, and use a mouseup event to identify where the drop occurs, But do not use drag events for this, it is much too complicated for what you need. -- ___ REUSE CODE! Use custom tags; See http://www.contentbox.com/claude/customtags/tagstore.cfm (Please send any spam to this address: [EMAIL PROTECTED]) Thanks. [Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings] [Donations and Support]
RE: DHTML Drag and Drop to reorder record set
Guy, Thanks for the kind words.The truth is that I learned by reading some tutorial somewhere myself.If I could have remembered where it was, I would have just sent you the link, because it was quite good. That said, my application of what I learned was more specifically geared toward interaction with a ColdFusion-generated database list.If this is something that would be of interest as an article somewhere (Mr. Dinowitz?), I might try putting it together. In any case, thanks again for the praise. Matthieu -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: Friday, September 03, 2004 11:09 AM To: CF-Talk Subject: RE: DHTML Drag and Drop to reorder record set Hi Matthieu, That's exactly the launching pad I was hoping for. Not to mention the exact same functionality that I am going for. Your description is excellent and concise. Might you think of doing a tutorial on it for other folks? Thanks again. ~Guy _ [Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings] [Donations and Support]
RE: DHTML Drag and Drop to reorder record set
I was going to suggest something similar.You could use a + and - button to move the item up or down.Then _javascript_ just needs to find the currently selected item(s) and then add or subtract one to the index and adjust the other indexes accordinly to move the others into the right place.I guess my other question would be, how are you going to make these changes stick in the database or wherever you store these? John -Original Message- From: Claude Schneegans [mailto:[EMAIL PROTECTED] Sent: Friday, September 03, 2004 11:17 AM To: CF-Talk Subject: Re: DHTML Drag and Drop to reorder record set Basically what I have is like a to do list. But lets say I want to take item #5 and drop it between item #2 and #3 so it becomes the new #3 and the old #3 becomes #4 and so on. I think in your case, I wouldn't use true drag'n drop, I mean drag events. Drag events are really to copy some content and paste it some where else. In your case, what you want to do is just identify an element in an array and rearrange that array depending where you drop the element. Just use mousedown event to identify the element being dragged, change the cursor, and use a mouseup event to identify where the drop occurs, But do not use drag events for this, it is much too complicated for what you need. -- ___ REUSE CODE! Use custom tags; See http://www.contentbox.com/claude/customtags/tagstore.cfm (Please send any spam to this address: [EMAIL PROTECTED]) Thanks. [Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings] [Donations and Support]
RE: DHTML Drag and Drop to reorder record set
It doesn't do everything you want, but the core of it can be accomplished easily using my ObCollectionOrdered _javascript_ abstraction here (long URL alert!): http://www.depressedpress.com/depressedpress/Content/Development/_javascript_/ Extensions/ObCollectionOrdered/Index.cfm The collection object allows you to store object while maintaining order and provides full rank and sorting functions to move elements around, promote them, demote them, sort them, swap positions, etc. There a sample on the site than shows you how to do this in a Select list. I've used it to do something similar to what you're asking about - I populate a div by looping over the collection and displaying it's elements (how you do that is up to you).Then the interface determines how to order them - for example if you drag onto an element you can easily insert that object into the collection.Then all you have to do is rerun the display function. In essence all you're doing is making changes the abstraction object based on interface events and then redisplaying it.Don't bother trying to modify the display to represent your object manipulations: just redisplay the whole thing from scratch._javascript_ is so fast it makes no difference and it's much, much simpler. Jim Davis From: Guy McDowell [mailto:[EMAIL PROTECTED] Sent: Friday, September 03, 2004 10:13 AM To: CF-Talk Subject: DHTML Drag and Drop to reorder record set Hi, I'm not a DHTML guy by any means. Could someone point me in the right direction to figuring out how to use DHTML to take a record from within a record set, drag it to a higher or lower position, and have it change its position within the record set? Basically what I have is like a to do list. But lets say I want to take item #5 and drop it between item #2 and #3 so it becomes the new #3 and the old #3 becomes #4 and so on. I've got the logic basically but not the code. Any good tutorials or examples of something similar? [Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings] [Donations and Support]
