473,320 Members | 1,828 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 4521

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: srikanth | last post by:
Hi all, I have an requirement in one of my projects. We have one aspx page, in that we have two frames, in each frame having a tree structure control(dynamic data). In the left Frame we are...
1
by: Karsten Schramm | last post by:
Hi, if I drag an Outlook.MailItem to a Windows-Explorer window a <subject>.msg file will be created. Now I try to drag & drop a mail item to my own WinForm app. Unfortunately it doesn't work....
0
by: Plumer | last post by:
Hello everyone, Yesterday I posted a message about implementing drag & drop in a TreeView control. I'm having real difficulty getting this to work -- the process seems to be incredibly...
2
by: Grey | last post by:
I need to design a workflow application with C#. I want to design an UI with some workflow components which they can be drag & drop anywhere in order to design the workflow for the application...
2
by: Ivo Tcholakov | last post by:
Is it possible to drag and drop controls in an aspx page at runtime ? Meaning i have developed a ASP.NET web form, the web form is now downloaded in IE - now can i have this form to detect mouse...
3
by: Goldwind | last post by:
Hi, I"m trying to use drag & drop of text from one text box to another but without suceess. Microsoft presented an example in "101 code samples" BUT in this example the code select and drag all...
1
by: Terry Olsen | last post by:
My first time using TreeViews. I have TreeView1 set up to display my directory structure just like Windows Explorer. I can drag & drop files and folders over to TreeView2. I can re-arrange the...
3
by: VB Programmer | last post by:
In VB.NET 2005 (winform) any sample code to drag & drop items between 2 listboxes? Thanks!
5
by: sesar | last post by:
How can I impement drag&drop for simple 'dialog base' application... I want to drag&drop txt file and load the text to variable
1
by: patrickq | last post by:
What am trying to achieve is dragging an element from one IFRAME/FRAME into another IFRAME/FRAME. But upon dropping the element, I do not want the target IFRAME/FRAME to open/load it. I want to set...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.