drag and paste hyperlink to textarea without highlighting in IE using JS

**iam_clint** · Mar 23 '07, 06:57 PM

yes there is but it would take a bit of code

Javascript test page - Universal mouse control

for mouse events

then when your mouse lets go over the textarea change its value.

**u01jmg3** · Mar 23 '07, 07:09 PM

A lot of code even for a simple thing like copying and pasting the text of a hyperlink once dragged over a textarea? The link to the example given seems a lot more complicated than I wish to do. I guess I'm on a bit of a downwards slope? Thank-you for your reply.

**iam_clint** · Mar 23 '07, 07:53 PM

Code:

<script>
var mousex = 0;
var mousey = 0;
var grabx = 0;
var graby = 0;
var orix = 0;
var oriy = 0;
var elex = 0;
var eley = 0;
var algor = 0;
var newele;
var dropped = false;
var dragobj = null;
function falsefunc() { return false; } 
function init()
{
document.onmousemove = update; 
update();
}
function getMouseXY(e) // works on IE6,FF,Moz,Opera7
{ 
if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
if (e)
{ 
if (e.pageX || e.pageY)
{ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
mousex = e.pageX;
mousey = e.pageY;
algor = '[e.pageX]';
if (e.clientX || e.clientY) algor += ' [e.clientX] '
}
else if (e.clientX || e.clientY)
{ // works on IE6,FF,Moz,Opera7
mousex = e.clientX + document.body.scrollLeft;
mousey = e.clientY + document.body.scrollTop;
algor = '[e.clientX]';
if (e.pageX || e.pageY) algor += ' [e.pageX] '
} 
}
}
function update(e)
{
getMouseXY(e); // NS is passing (event), while IE is passing (null)
}
function grab(context)
{
document.onmousedown = falsefunc; 
var newele = document.createElement("div");
newele.style.position = "absolute";
newele.style.opacity = '.'+50;
newele.style.filter = "alpha(opacity:50)";
newele.style.visibility="hidden";
newele.innerHTML = context.innerHTML;
dragobj = newele;
dragobj.style.zIndex = 10; // move it to the top
document.getElementsByTagName('body')[0].appendChild(newele);
document.onmousemove = drag;
document.onmouseup = drop;
dropped = false;
grabx = mousex;
graby = mousey; 
elex = orix = context.offsetLeft;
eley = oriy = context.offsetTop;
update();
}
function drag(e)
{
if (dragobj)
{
dragobj.style.visibility="visible"; 
elex = orix + (mousex-grabx);
eley = oriy + (mousey-graby);
dragobj.style.position = "absolute";
dragobj.style.left = (elex).toString(10) + 'px';
dragobj.style.top = (eley).toString(10) + 'px';
dropped = false;
}
update(e);
return false; // in IE this prevents cascading of events, thus text selection is disabled
}
function drop() {
if (dragobj)
{
dragobj.style.zIndex = 0;
dragobj.style.display='none';
dragobj.style.visibility='hidden';
dropped = true;
}
update();
document.onmousemove = update;
document.onmouseup = null;
document.onmousedown = null; 
}
function checkdrop(dropinto) {
if (dragobj && dropped) {
dropinto.value = dropinto.value + dragobj.innerHTML;
dropped = false;
}
}
</script>
<html>
<body>
<div id="link1" onmousedown="grab(this)"><A href="http://www.google.com">Drag me</a></div>
<textarea id="textarea" onmouseover="checkdrop(this)" rows=20 cols=30></textarea>
</body>
</html>

I made up this little code messing around with it...

I don't like giving away scripts without you working for it but this one was kind of challenging :P i didn't give it all away! give this a test and play around with it.

**u01jmg3** · Mar 23 '07, 09:26 PM

Amazing thanks alot! Ive put it into my own page which has numerous other bits of JS so Ive noticed a few bugs. For some reason when I hold my mouse down and begin dragging a link instead of the opaque link that follows the mouse being just besides the mouse cursor it's miles up the page (this changes so sometimes its close enough to allow me to drop it in the textarea) but then if I do manage that it doesn't paste it again til I move my mouse over the textarea but that won't be a problem if I can sort the latter. Also if you drag and drop the link somewhere that isn't on the textarea but then mouseover the textarea (with no mousedown as you have already dropped the link) it pastes the link anyway. I also get an error that says "undefined is null or not at object" when I load the page which is annoying! Thanks again.

**u01jmg3** · Mar 23 '07, 10:00 PM

The problem with having an opaque copy of the link following the mouse whilst I also have a JS tooltip which follows the mouse whenever you are onmouseover of a hyperlink is they are interfering with each other. The JS tooltip isn't disabled till onmouseout and as this hasn't occured when onmousedown occurs there is already a <div></div> present (the JS tooltip) thus the opaque copy is miles up the page - I think that's the problem anyway! Works fine if I get rid of the JS tooltip but I kinda need it.

<div id="overDiv" style="position : absolute;"></div>
<a href="#" onmouseover="re turn overlib('toolti p');" onmouseout="ret urn nd();" onmousedown="gr ab(this);">link </a>

Is there anyway of changing it so that it doesn't use an opaque copy (although a great idea) but instead uses the mouse cursor so that when the textarea is on focus it pastes? I guess it was easier to create the <div></div> and paste the text it contained. I'm not sure how to get this to work with my current JS. *hmmm*

**u01jmg3** · Mar 24 '07, 01:26 AM

Is there no way of capturing, say for example, a hyperlinks onmousedrag event in the same way you can capture its onmouseover event? That way I could just use onmousedrag i.e. mouse button held down and mouse then moved to fire a function? Your script is perfect if I didnt already have existing JS doing other things but I do. I'm open to suggestions but every other mouse event, I think, already does something -> onclick, ondblclick, onmousedown and onmouseup are taken up as the thing in question is a hyperlink, onmouseover and onmouseout are used by the JS tooltip plus there's no action involved and onmousemove well that would just be silly. I thought onmousedrag would be the answer! How can such a simple issue turn into something this chaotic? Thanks for moderator + anyone elses help.

**iam_clint** · Mar 24 '07, 01:45 AM

no you can't capture on drag.

drag and paste hyperlink to textarea without highlighting in IE using JS

drag and paste hyperlink to textarea without highlighting in IE using JS

Comment

Comment

Comment

Comment

Comment

Comment

Comment