Javascript Drag&Drop

E

ericgorr

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.
 
M

Moot

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
 
E

ericgorr

Moot said:
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/JavaScriptReference/Event-Handlers-Reference/onDragStartExample.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 <span> of
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.
 
E

ericgorr

RobG said:
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=http://ericgorr.net/safaritest.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...
 
E

Eric

RobG said:
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=http://ericgorr.net/safaritest.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>
 
E

ericgorr

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top