469,602 Members | 1,939 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,602 developers. It's quick & easy.

Javascript Drag&Drop

I have the following test page:

http://ericgorr.net/test.html

<html>
<head><title>Simple JavaScript</title></head>
<BODY ondragstart="alert(event.srcElement.tagName)">
<INPUT TYPE=text VALUE="Select and drag this text">
<SPAN >Select and drag this text</SPAN>
<TEXTAREA>Select and drag this text</TEXTAREA>
</BODY>
</html>

which I grabbed by googling 'ondragstart'. However, I never see an
alert appear.

Should this be working?

If not, why not and how can I get an alert to appear when selecting and
dragging the text?

If you do see an alert, any idea why I don't?

I've tried this page with Firefox 2.0RC3, Safari and IE6.

Thank you.

Oct 17 '06 #1
8 4251

er******@gmail.com wrote:
I have the following test page:

http://ericgorr.net/test.html

<html>
<head><title>Simple JavaScript</title></head>
<BODY ondragstart="alert(event.srcElement.tagName)">
<INPUT TYPE=text VALUE="Select and drag this text">
<SPAN >Select and drag this text</SPAN>
<TEXTAREA>Select and drag this text</TEXTAREA>
</BODY>
</html>

which I grabbed by googling 'ondragstart'. However, I never see an
alert appear.

Should this be working?

If not, why not and how can I get an alert to appear when selecting and
dragging the text?

If you do see an alert, any idea why I don't?

I've tried this page with Firefox 2.0RC3, Safari and IE6.

Thank you.
Are you sure that "ondragstart" is a valid event?
I've never seen it before and it isn't on this reference for events:
http://www.w3schools.com/jsref/jsref_events.asp

Oct 17 '06 #2

Moot wrote:
Are you sure that "ondragstart" is a valid event?
Yes, although, a browser specific one, which for my needs is ok. A
google search will turn up many results.

One can check out:

http://www.java2s.com/Code/JavaScrip...artExample.htm

which should work under IE6, but I can't seem to make it work. I have
the code pasted into an html document at:

http://ericgorr.net/ietest.html

If anyone know how to make this work under IE6, I would be interested.

If you have access to Safari, I have a working example at:

http://ericgorr.net/safaritest.html

In this working example, the element to be dragged is just a <spanof
un-selectable text, which uses an image to help the user know that a
drag is taking place and the text stored with the drag is "<its me>".
When dragging the text to a text editor, the text editor should insert
the "<its me>" text into the open document.

In the final solution I am working towards, instead of a text editor,
it will be my own native application running on MacOSX and Windows.
Instead of the "<its me>" text, it will be something more meaningful.
And the element the user would click and drag would be something other
then unselectable text.

But, all of the pieces are here of what I am looking to do. One can see
everything by viewing the source for the page. If anyone know how this
page can be modified so it works with IE6 & TextPad, I would be
interested.

Now, if anyone can tell me why the lower span of text, which attempts
to just construct an image without ever displaying it does not work
under Safari (it crashes Safari), I would be interested.

Oct 17 '06 #3
er******@gmail.com wrote:
Moot wrote:
Are you sure that "ondragstart" is a valid event?

Yes, although, a browser specific one, which for my needs is ok. A
google search will turn up many results.

If it helps, here's some documentation and examples straight from the
horse's mouth:
http://msdn.microsoft.com/workshop/a...ndragstart.asp

Oct 18 '06 #4

er******@gmail.com wrote:
[...]
Now, if anyone can tell me why the lower span of text, which attempts
to just construct an image without ever displaying it does not work
under Safari (it crashes Safari), I would be interested.
A good place to start is with valid HTML (allowing for the non-standard
attributes like ondragstart, etc.).

<URL:
http://validator.w3.org/check?uri=ht...afaritest.html
>
One error missed by the validator is:

</body
</html>

--
Rob

Oct 18 '06 #5

RobG wrote:
er******@gmail.com wrote:
[...]
Now, if anyone can tell me why the lower span of text, which attempts
to just construct an image without ever displaying it does not work
under Safari (it crashes Safari), I would be interested.

A good place to start is with valid HTML (allowing for the non-standard
attributes like ondragstart, etc.).

<URL:
http://validator.w3.org/check?uri=ht...afaritest.html

One error missed by the validator is:

</body
</html>
I didn't see any errors that would cause the lower span of text to
either cause Safari to crash or cause the drag to fail.

My only guess is that

myImage.src

in

ondragstart="SpanDragHandler( myImage.src, 'its me2' )"

does not resolve to a valid image source. I can easily change it to

ondragstart="SpanDragHandler( document.testimg, 'its me' )"

which is exactly like the first span and it will work....the only
difference being in how I am obtaining an image source.

Again, if anyone knows what is wrong, I would be interested...

Oct 18 '06 #6
RobG <rg***@iinet.net.auwrote:
er******@gmail.com wrote:
[...]
Now, if anyone can tell me why the lower span of text, which attempts
to just construct an image without ever displaying it does not work
under Safari (it crashes Safari), I would be interested.

A good place to start is with valid HTML (allowing for the non-standard
attributes like ondragstart, etc.).

<URL:
http://validator.w3.org/check?uri=ht...afaritest.html
On the off chance this may have been the problem, I fixed the various
things the validator was complaining about. No luck the second span of
text still either crashes safari when one attempts to drag or does not
result in a drag depending on how I write the code.

What I am not sure about is how myImage can be made to resolve to the
same thing that document.testimg does.

Anyone have any ideas?

The page can be found at http://ericgorr.net/safaritest.html

I know that the myImage variable is getting the image, because the
'Test' button works correctly.

And, here's the source for the page for those who don't want to use
their browser to view the source.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=ISO-8859-1">

<title>Simple JavaScript</title>
<script language="JavaScript" type="text/javascript">

var myImage = new Image();
myImage.src = "images/getfuzzy.gif";

function BodyDragHandler() {
alert('hello');
}

function BodyDragEndHandler() {
alert('goodbye');
}

function SpanDragHandler( image, text ) {
event.dataTransfer.setData( "text/plain", text );
event.dataTransfer.effectAllowed = "copy";
event.dataTransfer.setDragImage( image, 16, 15 );
event.stopPropagation();
}

function ButtonClick() {
document.buttonimg.src = myImage.src;
}

</script>

</head>
<body ondragstart="BodyDragHandler()" ondragend="BodyDragEndHandler()">

<span style="-khtml-user-drag:element; -khtml-user-select: none;"
ondragstart="SpanDragHandler( document.testimg, 'its me' )">Drag this
text. this works.</span>

<br>
<br>

<span style="-khtml-user-drag:element; -khtml-user-select: none;"
ondragstart="SpanDragHandler( myImage, 'its me2' )">Drag this text.
either crashes or won't drag.</span>

<br>

<img name="testimg" src="images/getfuzzy.gif" alt="test picture">

<br>

<button onclick="ButtonClick();">Test</button<br>
<img name="buttonimg" src="" alt="button picture">

</body>
</html>
Oct 18 '06 #7

George3 wrote:
er******@gmail.com wrote:
Moot wrote:
Are you sure that "ondragstart" is a valid event?
Yes, although, a browser specific one, which for my needs is ok. A
google search will turn up many results.


If it helps, here's some documentation and examples straight from the
horse's mouth:
http://msdn.microsoft.com/workshop/a...ndragstart.asp
Thanks. That did help.

Oct 18 '06 #8
Well, via an irc chat with the fine folks at #webkit, I was able to
discover that this issue is indeed a bug. Apparently, it has been fixed
in a more recent build of webkit (http://webkit.org/)

I have reported this problem to Apple and the bug number is:

rdar://4792468

If this bug bothers anyone else, please report it yourself. The more
bug reports they receive, the more likely they are to release the fix
sooner rather then later.
Eric wrote:
What I am not sure about is how myImage can be made to resolve to the
same thing that document.testimg does.

Anyone have any ideas?

The page can be found at http://ericgorr.net/safaritest.html

I know that the myImage variable is getting the image, because the
'Test' button works correctly.

And, here's the source for the page for those who don't want to use
their browser to view the source.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=ISO-8859-1">

<title>Simple JavaScript</title>
<script language="JavaScript" type="text/javascript">

var myImage = new Image();
myImage.src = "images/getfuzzy.gif";

function BodyDragHandler() {
alert('hello');
}

function BodyDragEndHandler() {
alert('goodbye');
}

function SpanDragHandler( image, text ) {
event.dataTransfer.setData( "text/plain", text );
event.dataTransfer.effectAllowed = "copy";
event.dataTransfer.setDragImage( image, 16, 15 );
event.stopPropagation();
}

function ButtonClick() {
document.buttonimg.src = myImage.src;
}

</script>

</head>
<body ondragstart="BodyDragHandler()" ondragend="BodyDragEndHandler()">

<span style="-khtml-user-drag:element; -khtml-user-select: none;"
ondragstart="SpanDragHandler( document.testimg, 'its me' )">Drag this
text. this works.</span>

<br>
<br>

<span style="-khtml-user-drag:element; -khtml-user-select: none;"
ondragstart="SpanDragHandler( myImage, 'its me2' )">Drag this text.
either crashes or won't drag.</span>

<br>

<img name="testimg" src="images/getfuzzy.gif" alt="test picture">

<br>

<button onclick="ButtonClick();">Test</button<br>
<img name="buttonimg" src="" alt="button picture">

</body>
</html>
Oct 19 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by srikanth | last post: by
2 posts views Thread by Grey | last post: by
2 posts views Thread by Ivo Tcholakov | last post: by
3 posts views Thread by Goldwind | last post: by
1 post views Thread by Terry Olsen | last post: by
3 posts views Thread by VB Programmer | last post: by
5 posts views Thread by sesar | last post: by
4 posts views Thread by guiromero | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.