Enable drag and drop to the text between <span></span>

Wang, Jay · May 21, 2004

Hello, all,
I would like to enable some text between <SPAN
url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some
javascript and it will extract http://www.testserver.com/ from the the span
element when I select the whole text in the SPAN and drag it.

However, I want to drag it without have to select the words between the span
element. The default mouse action will only select the words when i move the
mouse. Can someone point me to the right direction? thanks.

Best Regards,
Jay

Wang, Jay · May 24, 2004

Thank you, YEP, here is the source code of the HTML file. If i can enable
the drag and drop on the span element without selecting it and then when the
span element is dropped, only the "title" information is dropped on the
target OUTLOOK. Does this make sense this time? I'm sorry if I didn't ask
the question clearly. Hope the source code will be helpful to get us on the
right track.

Jay

------------------------------------------------

<html xmlns:sp>
<head>
</head>
<script language="javascript">

/* ----------------------------------------------

Used to query for drag and drop

-------------------------------------------------*/

function initDropInfo(span)
{
var objEl = window.event.srcElement;
var src = objEl.src
var str= objEl.getAttribute("title");

window.event.dataTransfer.setData("TEXT",str);
window.event.dataTransfer.effectAllowed = "copyLink";
window.event.dataTransfer.dropEffect = 'move';
}

</script>

<body>
<span id="test" ondragstart="initDropInfo(this)"
title="http://www.test.com/test1.html" style='cursor:hand; color:blue;'

test drag and drop link</span> to extract "title" information in span

element.

</body>
</html>

Yann-Erwan Perio · May 24, 2004

If i can enable
the drag and drop on the span element without selecting it and then when the
span element is dropped, only the "title" information is dropped on the
target OUTLOOK. Does this make sense this time?

Much more sense indeed

The following will do, you were very close. Note that the link
capability only works when the message format is 'text' (Outlook
recognizes the dropped string to be a string, and puts a link around it)
- the way the string is treated should indeed depend on the receiving
host, and I don't think you can do much about this.

This is IE5.5+ only.

<script type="text/jscript">
function mdown(span){
var rng;
if(document.body && document.body.createTextRange){
rng=document.body.createTextRange();
rng.moveToElementText(span);
rng.select();
}
}

function mdrag(span){
var url=span.title;
if(window.event && window.event.dataTransfer){
with(window.event.dataTransfer){
setData("text", url);
effectAllowed="copy";
dropEffect="move";
}
}
}
</script>

<div>
This is a
<span
id="test"
onmousedown="mdown(this)"
ondragstart="mdrag(this)"
title="http://www.test.com/test1.html"
style="cursor:hand; color:blue;">test drag and drop link</span>
to extract "title" information in span element.
</div>

HTH
Yep.

Wang, Jay · May 25, 2004

This is awesome, YEP, you are the man!!

I saw the script still select the text between <SPAN> and then enable the
dragdrop action. This is very nice.

I'm wondering if we can control the default behavior of the mouse from
selecting text to none. basically, if i have a link html looks like: <a
href="http://test.com/test.html">test link should be dragged and dropped as
a whole entity</a>
The link will be dragged as an entity without having to selecting it. Are
there some tricks to enable this behavior on <span>?

Outlook display the whole <span> section and discard the javascipt action
definitely has something to do with the text being selected in the first
place.

Thanks again, Yann, You are extremely helpful.

Jay

Yann-Erwan Perio · May 25, 2004

I'm wondering if we can control the default behavior of the mouse from
selecting text to none.

We can, but the drag and drop needs some text to be selected in order to
be triggered, so that wouldn't work (you can however clear the selection
*after* the drag has started, see below).

The link will be dragged as an entity without having to selecting it. Are
there some tricks to enable this behavior on <span>?

I don't think so, moreover in my computer the link is dragged as an
attachment in Outlook

Of course you could create a link before
starting the drag, put the SPAN inside and remove it afterwards, but...
why not use a link straightforward if the behavior it exposes just
happens to be what you're looking for?

Outlook display the whole <span> section and discard the javascipt action
definitely has something to do with the text being selected in the first
place.

An interesting hypothesis, which turns out to be true to a certain
extent. Just use:

function mdrag(span){
var url=span.title;
document.selection.empty();
if(window.event && window.event.dataTransfer){
with(window.event.dataTransfer){
effectAllowed="copyLink";
dropEffect="move";
setData("text", url);
}
}
}

....instead of the previous mdrag function and see if that works the way
you want.

Thanks again, Yann, You are extremely helpful.

Well I'm glad if that helps, but I'm still missing the big picture! If
you could provide more insight on the context then we might suggest
other approaches, perhaps more adapted to the situation (unless you're
dealing with a very specific requirement).

Regards,
Yep.

Wang, Jay · May 25, 2004

Thanks a lot, YEP. You understand me so well.

"document.selection.empty();" solved every problem. Outlook is taking the
extracted properties perfectly right now.
I appreciate your help so much. Thanks a million!

Jay

Need help , Having problem with Drag n Drop...	1	Dec 21, 2022
Need help , Having problem with Drag n Drop ?	9	Dec 21, 2022
drag and drop target strategies	20	Feb 15, 2010
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
[HELP] Add-on - Twitch chat input	0	Aug 31, 2024
Text box simply do not stand out against the wall paper.	3	Feb 7, 2025
Can someone explain why i have to drag my mouse on one window and the shape to be printed on another	1	Feb 9, 2022
How to make an input box enable for only past dates and for the startdate if it falls in the current month?	5	Jun 12, 2023

Enable drag and drop to the text between <span></span>

Wang, Jay

Wang, Jay

Yann-Erwan Perio

Wang, Jay

Yann-Erwan Perio

Wang, Jay

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads