By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,381 Members | 1,626 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,381 IT Pros & Developers. It's quick & easy.

How do I make a piece of text in HTML non-selectable, but draggable?

P: n/a
A piece of text on my HTML page is framed with DIV tags.

While I want to be able to drag/drop it, I don't want it to be
selected, since it interferes with dragging.

I'd like to press a mouse key and drag it. Instead I start selecting
the text and keep going down selecting everything underneath. So in
order to actually drag, I have to Double-Click it first, and only
after it allows me to drag.
Do you know what I mean?

If I do
<DIV OnSelectStart='return false;'>inner text i want to drag</DIV> <-
it allows me neither selection, nor dragging

What I want works fine with links, but not with pieces of text.
I need to be able to do the dragging of the inner text without
selection.

Is there any simple way?
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
what you can do is when the user presses the mousebutton (onmousedown) you
can select the text (using textrange objects) and then when the user will
move his mouse the ondragstart event will fire. an example of how to
implement this follows:

<style>.clsSpanDrag { background-color: yellow }
</style>
<script>
window.onload = function()
{
var el = document.getElementById("mySpan");
el.onmousedown = function()
{
var r = document.body.createTextRange();
r.moveToElementText(el);
r.select();
}
el.ondragstart = function(){alert("test")}
}
</script>
</head>

<body>
<p>this is a test <span class="clsSpanDrag" id="mySpan">this is a
test</span> this is a test
</body>

hope this helps

etan
"Big Bolt" <bi******@hotmail.com> wrote in message
news:3c**************************@posting.google.c om...
A piece of text on my HTML page is framed with DIV tags.

While I want to be able to drag/drop it, I don't want it to be
selected, since it interferes with dragging.

I'd like to press a mouse key and drag it. Instead I start selecting
the text and keep going down selecting everything underneath. So in
order to actually drag, I have to Double-Click it first, and only
after it allows me to drag.
Do you know what I mean?

If I do
<DIV OnSelectStart='return false;'>inner text i want to drag</DIV> <-
it allows me neither selection, nor dragging

What I want works fine with links, but not with pieces of text.
I need to be able to do the dragging of the inner text without
selection.

Is there any simple way?

Jul 20 '05 #2

P: n/a
Thanks guys for your prompt response!

Etan - worked like a charm, people will love it tomorrow.
I spend the whole last night trying different tweaks to make it work.

-------------- Here's how it finalized --------------------------
<div style="cursor:hand;" id=myId OnMouseDown='MouseDown()'
OnDragStart='DragStart()'>my bloody text</div>

<script>
function OnMouseDown() {
var obj = window.event.srcElement;
var r = document.body.createTextRange();
r.moveToElementText(obj);
r.select();
return true;
}

function OnDragStart() {
event.dataTransfer.effectAllowed = "all";
return true;
}
</script>
-----------------------------------------------------------------

The power if Internet amazes me!
"Etan Bukiet" <eb*****@comcast.net> wrote in message news:<Ol**************@tk2msftngp13.phx.gbl>...
what you can do is when the user presses the mousebutton (onmousedown) you
can select the text (using textrange objects) and then when the user will
move his mouse the ondragstart event will fire. an example of how to
implement this follows:

<style>.clsSpanDrag { background-color: yellow }
</style>
<script>
window.onload = function()
{
var el = document.getElementById("mySpan");
el.onmousedown = function()
{
var r = document.body.createTextRange();
r.moveToElementText(el);
r.select();
}
el.ondragstart = function(){alert("test")}
}
</script>
</head>

<body>
<p>this is a test <span class="clsSpanDrag" id="mySpan">this is a
test</span> this is a test
</body>

hope this helps

etan
"Big Bolt" <bi******@hotmail.com> wrote in message
news:3c**************************@posting.google.c om...
A piece of text on my HTML page is framed with DIV tags.

While I want to be able to drag/drop it, I don't want it to be
selected, since it interferes with dragging.

I'd like to press a mouse key and drag it. Instead I start selecting
the text and keep going down selecting everything underneath. So in
order to actually drag, I have to Double-Click it first, and only
after it allows me to drag.
Do you know what I mean?

If I do
<DIV OnSelectStart='return false;'>inner text i want to drag</DIV> <-
it allows me neither selection, nor dragging

What I want works fine with links, but not with pieces of text.
I need to be able to do the dragging of the inner text without
selection.

Is there any simple way?

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.