How to drag images with a mouse?

[Abraham Durceau]

Hi, everybody!

I want to implement in JScript an image-dragging functionality like the one
in image processing apps like Adobe Photoshop etc., when:

a) I press a left button when a cursor is over the image (say, x0,y0).
b) Holding a button, I start dragging. An image 'sticks' to a cursor and
moves with it.
c) When I release a button, an image has to reside in (x1,y1) until I want
to drag it again.

At this time I KNOW how:
a) To intercept a mouse-click (measuring X and Y and storing in a function
called by onkeyup event)
b) How to draw an image
[Seriously, (b) may matter, since image may be drawn either as itself,
or as a background of some element, which may be dragged.]

What I don't know, is:
a) what HTML elements may be dragged, and what may not; and what methods
should be used.

- So, would anybody be so kind to provide a relevant link, or a code sample,
or... maybe it's impossible to do it at all - sorry, I'm a novice in JScript
programming...

Thanks in advance.

 

[pcx99]

Hi, everybody!

I want to implement in JScript an image-dragging functionality like the one
in image processing apps like Adobe Photoshop etc., when:

a) I press a left button when a cursor is over the image (say, x0,y0).
b) Holding a button, I start dragging. An image 'sticks' to a cursor and
moves with it.
c) When I release a button, an image has to reside in (x1,y1) until I want
to drag it again.

At this time I KNOW how:
a) To intercept a mouse-click (measuring X and Y and storing in a function
called by onkeyup event)
b) How to draw an image
[Seriously, (b) may matter, since image may be drawn either as itself,
or as a background of some element, which may be dragged.]

What I don't know, is:
a) what HTML elements may be dragged, and what may not; and what methods
should be used.

- So, would anybody be so kind to provide a relevant link, or a code sample,
or... maybe it's impossible to do it at all - sorry, I'm a novice in JScript
programming...

Thanks in advance.

This links to one of the articles I wrote so it's a self-prmoting link.
It does however does provide a solid framework that you can use to
expand on. The initial demonstration is for a video layer but if you
scroll down to the bottom there's a link to full source code for a
moveable image as well.

http://www.hunlock.com/blogs/Javascript_Drag_and_Drop

 

[Nerf]

Hi, everybody!

I want to implement in JScript an image-dragging functionality like the one
in image processing apps like Adobe Photoshop etc., when:

a) I press a left button when a cursor is over the image (say, x0,y0).
b) Holding a button, I start dragging. An image 'sticks' to a cursor and
moves with it.
c) When I release a button, an image has to reside in (x1,y1) until I want
to drag it again.

At this time I KNOW how:
a) To intercept a mouse-click (measuring X and Y and storing in a function
called by onkeyup event)
b) How to draw an image
[Seriously, (b) may matter, since image may be drawn either as itself,
or as a background of some element, which may be dragged.]

What I don't know, is:
a) what HTML elements may be dragged, and what may not; and what methods
should be used.

- So, would anybody be so kind to provide a relevant link, or a code sample,
or... maybe it's impossible to do it at all - sorry, I'm a novice in JScript
programming...

Thanks in advance.

This links to one of the articles I wrote so it's a self-prmoting link.
It does however does provide a solid framework that you can use to
expand on. The initial demonstration is for a video layer but if you
scroll down to the bottom there's a link to full source code for a
moveable image as well.

http://www.hunlock.com/blogs/Javascript_Drag_and_Drop
[/QUOTE]

Is there a way to track to overlap of an image being dragged to where it is
dropped? I'd like to be able to drag a few items and move them into a drop box.
As an example, once a graphic was dropped would there be an event or values that
can be tested to see if there is an overlap between two images (individual items
being dragged and the destination image they would be dropped on)?

Thanks,
Nerf

 

[Isaac Schlueter]

a) what HTML elements may be dragged, and what may not; and what methods
should be used.

Anything that can be absolutely positioned can be dragged.

- So, would anybody be so kind to provide a relevant link, or a code sample,
or... maybe it's impossible to do it at all

I'm partial to http://developer.yahoo.com/yui/dragdrop/
Lots of examples, and pretty easy to set up.