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]
