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

[Wang, Jay]

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]

(REVISION to original question)

I would like to enable some text between <SPAN
url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN> to be able to be
dragged and dropped.

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" <ou**********@fastmail.fm> wrote in message
news:c8*********@news.vanderbilt.edu...

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

[Yann-Erwan Perio]

Wang, Jay wrote:

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.

This isn't an easy task, since you'd have to analyze text boundaries and
add/remove nodes in the tree. Ranges can help you, but they're supported
so far only by IE and Mozilla. You'll find an example below, not close
to satisfying, but which should nonetheless illustrate the use of many
range methods.

I've used an alternate click system instead of drag/drop, mostly because
of Mozilla not firing mouseup while dragging, and not offering ways to
prevent the drag (AFAIK).

I've also bumped into a strange bug as of Mozilla 1.7a, which would
require try/catch construct to be dealt with (adding an <input
type="text"> in the script, then clicking on it, fails miserably -
impossible to simply read a single property on the object).

<style type="text/css">
span[url]{background:yellow;}
</style>

<div>
Hello, <span url="foo.html">foo!</span>
You can drag and drop the foo where you want!
</div>

<script type="text/javascript">
window.onload=function(evt){
var d=document,rng;
if(d.body&&d.body.getAttribute&&d.body.nodeType&&
typeof d.body.parentNode!="undefined") {

if(d.body.createTextRange) rng=d.body.createTextRange();
else if(d.createRange) rng=d.createRange();
if(rng){
if(rng.moveToElementText&&rng.pasteHTML&&rng.moveT oPoint ||
rng.selectNode&&rng.insertNode&&rng.createContextu alFragment)
d.onclick=new Function("e","drag(e)");
}

}
}
var drag=(function(){

var dragEl;

function CRng(){
var d=document,rng;
if(d.body.createTextRange) { rng=d.body.createTextRange(); }
else if(d.createRange) { rng=d.createRange(); }
return rng;
}

function MRng(rng, el){
if(rng && el){
if(rng.moveToElementText) { rng.moveToElementText(el); }
else if(rng.selectNode) { rng.selectNode(el); }
}
return rng;
}

function SRng(rng){
if(rng){
if(rng.select) rng.select();
else{
with(this.getSelection()){
removeAllRanges();
addRange(rng);
}
}
}
return rng;
}

function WRng(rng,s){
if(rng){
if(rng.pasteHTML)rng.pasteHTML(s);
else rng.insertNode(rng.createContextualFragment(s));
}
return rng;
}

function hasAscendantNode(node,nodeName){
nodeName=nodeName.toLowerCase();
while(node&&node.nodeName.toLowerCase()!=nodeName)
node=node.parentNode;
return !!node;
}

function gtext(el){
if(typeof el.innerText!="undefined") return el.innerText;
else return (function(elmt){
for(var ii=0,buf=[],c=elmt.childNodes;ii<c.length;ii++){
if(c[ii].nodeType==3)buf.push(c[ii].nodeValue);
else if(c[ii].nodeType==1)buf.push(arguments.callee(c[ii]));
}
return buf.join("");
})(el);
}

return function(evt){
var tgt,rng,s,el;
evt=evt||window.event;

if(dragEl){
rng=CRng();
s="<a href='"+dragEl.getAttribute("url")+"'>"+
gtext(dragEl)+
"<\/a>";
if(rng.moveToPoint&&document.elementFromPoint){
tgt=document.elementFromPoint(evt.clientX,evt.clie ntY);
if(!hasAscendantNode(tgt,"a")&&
!hasAscendantNode(tgt,"input")&&
!hasAscendantNode(tgt,"textarea")){
rng.moveToPoint(evt.clientX,evt.clientY);
WRng(rng,s);
}
}else{
var c=evt.rangeParent,o=evt.rangeOffset;
if(c.nodeType==3){
c.splitText(o);
if(!hasAscendantNode(c,"a")&&
!hasAscendantNode(c,"input")&&
!hasAscendantNode(c,"textarea")){
rng.selectNode(c);
SRng(rng).collapse(false);
WRng(rng,s);
this.getSelection().removeAllRanges();
}
}
}
dragEl=null;
}else{
tgt=evt.originalTarget||evt.srcElement;
while(tgt&&tgt.nodeType!=1)tgt=tgt.parentNode;
if(tgt&&tgt.getAttribute("url"))
SRng(MRng(CRng(), dragEl=tgt));
}
};
})();
</script>

HTH
Yep.

[Wang, Jay]

Thanks a lot, YEP. This solution helps, but it doesn't solve some other
problems. Is there a problem to drag it with out selecting the element
<span>? At this point, I will only need to make it work with IE.

Another problem is, will the drag and drop be effective if it's between IE
and OUTLOOK? I tried something to extract information from span element, but
the result only show up in some non-html compliant editor. Outlook will
display the original stuff with html code hidden, which means if the <span
title="foo bar" styles="color:blue;">foo bar</span> is dragged into outlook,
the result will be a blue text with hidden information in it.

I cannot find any helpful information to get this working by googling. I was
suggested to disable the default mouse function on the object that's to be
dragged. but i have no idea how to do that... Sorry, i'm a newbie. :)

"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:40***********************@news.free.fr...

Wang, Jay wrote:

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.

This isn't an easy task, since you'd have to analyze text boundaries and
add/remove nodes in the tree. Ranges can help you, but they're supported
so far only by IE and Mozilla. You'll find an example below, not close
to satisfying, but which should nonetheless illustrate the use of many
range methods.

I've used an alternate click system instead of drag/drop, mostly because
of Mozilla not firing mouseup while dragging, and not offering ways to
prevent the drag (AFAIK).

I've also bumped into a strange bug as of Mozilla 1.7a, which would
require try/catch construct to be dealt with (adding an <input
type="text"> in the script, then clicking on it, fails miserably -
impossible to simply read a single property on the object).

<style type="text/css">
span[url]{background:yellow;}
</style>

<div>
Hello, <span url="foo.html">foo!</span>
You can drag and drop the foo where you want!
</div>

<script type="text/javascript">
window.onload=function(evt){
var d=document,rng;
if(d.body&&d.body.getAttribute&&d.body.nodeType&&
typeof d.body.parentNode!="undefined") {

if(d.body.createTextRange) rng=d.body.createTextRange();
else if(d.createRange) rng=d.createRange();
if(rng){
if(rng.moveToElementText&&rng.pasteHTML&&rng.moveT oPoint ||
rng.selectNode&&rng.insertNode&&rng.createContextu alFragment)
d.onclick=new Function("e","drag(e)");
}

}
}
var drag=(function(){

var dragEl;

function CRng(){
var d=document,rng;
if(d.body.createTextRange) { rng=d.body.createTextRange(); }
else if(d.createRange) { rng=d.createRange(); }
return rng;
}

function MRng(rng, el){
if(rng && el){
if(rng.moveToElementText) { rng.moveToElementText(el); }
else if(rng.selectNode) { rng.selectNode(el); }
}
return rng;
}

function SRng(rng){
if(rng){
if(rng.select) rng.select();
else{
with(this.getSelection()){
removeAllRanges();
addRange(rng);
}
}
}
return rng;
}

function WRng(rng,s){
if(rng){
if(rng.pasteHTML)rng.pasteHTML(s);
else rng.insertNode(rng.createContextualFragment(s));
}
return rng;
}

function hasAscendantNode(node,nodeName){
nodeName=nodeName.toLowerCase();
while(node&&node.nodeName.toLowerCase()!=nodeName)
node=node.parentNode;
return !!node;
}

function gtext(el){
if(typeof el.innerText!="undefined") return el.innerText;
else return (function(elmt){
for(var ii=0,buf=[],c=elmt.childNodes;ii<c.length;ii++){
if(c[ii].nodeType==3)buf.push(c[ii].nodeValue);
else if(c[ii].nodeType==1)buf.push(arguments.callee(c[ii]));
}
return buf.join("");
})(el);
}

return function(evt){
var tgt,rng,s,el;
evt=evt||window.event;

if(dragEl){
rng=CRng();
s="<a href='"+dragEl.getAttribute("url")+"'>"+
gtext(dragEl)+
"<\/a>";
if(rng.moveToPoint&&document.elementFromPoint){
tgt=document.elementFromPoint(evt.clientX,evt.clie ntY);
if(!hasAscendantNode(tgt,"a")&&
!hasAscendantNode(tgt,"input")&&
!hasAscendantNode(tgt,"textarea")){
rng.moveToPoint(evt.clientX,evt.clientY);
WRng(rng,s);
}
}else{
var c=evt.rangeParent,o=evt.rangeOffset;
if(c.nodeType==3){
c.splitText(o);
if(!hasAscendantNode(c,"a")&&
!hasAscendantNode(c,"input")&&
!hasAscendantNode(c,"textarea")){
rng.selectNode(c);
SRng(rng).collapse(false);
WRng(rng,s);
this.getSelection().removeAllRanges();
}
}
}
dragEl=null;
}else{
tgt=evt.originalTarget||evt.srcElement;
while(tgt&&tgt.nodeType!=1)tgt=tgt.parentNode;
if(tgt&&tgt.getAttribute("url"))
SRng(MRng(CRng(), dragEl=tgt));
}
};
})();
</script>

HTH
Yep.

[Yann-Erwan Perio]

Wang, Jay wrote:

Hello,

Is there a problem to drag it with out selecting the element
<span>?
At this point, I will only need to make it work with IE.
If you're using only IE, then you should have a look at the
clipboardData and dataTransfer objects, which permit to customize the
drag and drop.

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_datatransfer.asp>

AIUI, these objects can only be used in IE, in other hosts you'd have to
check the relevant object model.
I tried something to extract information from span element, but
the result only show up in some non-html compliant editor.
A non-HTML compliant editor? Hmmm, that sounds familiar...Would you be
using FP or DW;-)
Outlook will
display the original stuff with html code hidden, which means if the <span
title="foo bar" styles="color:blue;">foo bar</span> is dragged into outlook,
the result will be a blue text with hidden information in it.

I can perfectly imagine that, though I cannot reproduce the problem
here. I'm unsure of what to do, to me that's a system setting, probably
in Outlook - check the relevant archives at http://groups.google.com/ or
wait for the knowledgeable to step by:-)

Unless I've completely misunderstood what you want to do, I don't think
you're in the right group - check the microsoft.public.* hierarchies for
Outlook newsgroups.
Regards,
Yep.

[Wang, Jay]

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" <y-*******@em-lyon.com> wrote in message
news:40***********************@news.free.fr... Wang, Jay wrote:

Hello,

Is there a problem to drag it with out selecting the element
<span>?
At this point, I will only need to make it work with IE.
If you're using only IE, then you should have a look at the
clipboardData and dataTransfer objects, which permit to customize the
drag and drop.

<URL:http://msdn.microsoft.com/workshop/a.../objects/obj_d
atatransfer.asp>
AIUI, these objects can only be used in IE, in other hosts you'd have to
check the relevant object model.

I tried something to extract information from span element, but
the result only show up in some non-html compliant editor.

A non-HTML compliant editor? Hmmm, that sounds familiar...Would you be
using FP or DW;-)

Outlook will
display the original stuff with html code hidden, which means if the <span title="foo bar" styles="color:blue;">foo bar</span> is dragged into outlook, the result will be a blue text with hidden information in it.

I can perfectly imagine that, though I cannot reproduce the problem
here. I'm unsure of what to do, to me that's a system setting, probably
in Outlook - check the relevant archives at http://groups.google.com/ or
wait for the knowledgeable to step by:-)

Unless I've completely misunderstood what you want to do, I don't think
you're in the right group - check the microsoft.public.* hierarchies for
Outlook newsgroups.
Regards,
Yep.

[Yann-Erwan Perio]

Wang, Jay wrote:

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]

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" <y-*******@em-lyon.com> wrote in message
news:40***********************@news.free.fr...

Wang, Jay wrote:

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.

[Yann-Erwan Perio]

Wang, Jay wrote:

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]

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

"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:40***********************@news.free.fr...

Wang, Jay wrote:

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.