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

Groups > comp.lang.javascript > #14020 > unrolled thread

Drag and Drop techniques ??

Back to article view | Back to comp.lang.javascript

Contents

  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

#14020 — Drag and Drop techniques ??

Hi:

    I'm now faced with developing a 'drag and drop' app whereby my user will 
click on an item in a list (situated in a pane on the left half of his 
browser display), and then move the 'clicked' item to one of several input 
fields situated in a pane on the right half of his browser screen.

    Before I 'google' myself into a bad corner, has anyone got a few 
starting hints ??

Thanks for some starting hints,

--
Mel Smith 

[toc] | [next] | [standalone]

#14022

Mel Smith wrote:
>     I'm now faced with developing a 'drag and drop' app whereby my user will
> click on an item in a list (situated in a pane on the left half of his
> browser display), and then move the 'clicked' item to one of several input
> fields situated in a pane on the right half of his browser screen.
>
>     Before I 'google' myself into a bad corner, has anyone got a few
> starting hints ??

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.

Good luck,

  -- Scott

[toc] | [prev] | [next] | [standalone]

#14023

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web