473,386 Members | 1,873 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,386 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 4526

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: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.