Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #14023

Re: Drag and Drop techniques ??

Show all headers | View raw

Scott said:

Most of what you need to do is obvious:  capture mousedown and mouseup
events on the elements you care about (including child elements if
there are not specific handles for dragging), capture mousemove
events, create some visible state to signal that you can drop the
element at a certain location, handle the change from position:static/
relative to position:absolute and back, and adjust the z-index
appropriately.

Some of the trickier bits might be calculating element position based
on mouse position if the draggables are constrained to a part of the
page and detecting intersections of elements being dragged and the
drag targets.  (That last sounds simple enough, and sometimes can be,
but it can definitely get tricky.)  Another tricky issue that I faced
once was that I had drop targets that included some elements not in
the document flow (can't remember if that were floated or positioned)
and it was really annoying to exclude them when determining if my
draggable was over a dropzone; I would suggest you avoid this if at
all possible.

One nice bit about drag and drop is that there is almost always only
one element being dragged at a time (and if not, usually you can
define a transparent container element for a collection of them) and
only drop target active at a time.  This means that you can do most of
your work in single objects without worrying about differing states
for different draggable objects.

There are numerous libraries available.  Do look at them, but if you
have the skills to write your own, by all means do so.


Thanks Scott:

    I'll dig in and start studying/developing ...

-- 
Mel Smith

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

Drag and Drop techniques ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-16 17:01 -0600
  Re: Drag and Drop techniques ?? Scott Sauyet <scott.sauyet@gmail.com> - 2012-05-16 17:09 -0700
    Re: Drag and Drop techniques ?? "Mel Smith" <med_cutout_syntel@aol.com> - 2012-05-16 18:53 -0600

csiph-web