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

Big Bolt

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

Subscribe Reply

20468

Etan Bukiet

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

Big Bolt

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

Similar topics

6141

Image + Text swap question

by: Randell D. | last post by:

Folks, I'm still learning javascript - I've invested in a couple of books and reading online as much as possible. I'm pretty sure what I am suggesting is possible though I'm trying to weigh up...

Javascript

6933

Text scrolling within a webpage

by: Cat Laugel | last post by:

Hello, I am redesigning my website and would like to have the text scroll within the webpage without the page itself scrolling.... if you understand what I mean... ;-) I want a very sleek look...

HTML / CSS

7513

Non editable text box

by: laura | last post by:

Can anyone help me to decide the best way to do this please. I'm writing an intranet and I need to put something like a non-editable scrolling text box on the home page where daily announcements...

ASP / Active Server Pages

3505

VS2005 is a PIECE of Garbage and is bug Ridden

by: Rob Dob | last post by:

VS2005 is a PIECE of Garbage and is bug Ridden, I wonder how many others feel the same, I am so sorry that I have moved away from VS2003, VS2005 is unstable, and half the stuff doesn't work, ...

C# / C Sharp

1875

Getting the coordinates of a piece of text with Javascript?

by: sasperilla | last post by:

Hi, I would like to find the coordinates of a word inside a div or span tag. I know you can find the coordinates of a tag inside the DOM, but can you get the coordinates of a portion of the...

Javascript

1660

Keeping text in its container

by: Sjef | last post by:

I am trying to understand the deeper meanings of containers. One would say: everything inside the container div will stay inside, but apparently that's not true. My test code is below. When I...

HTML / CSS

3464

Chained Selects and dynamic text fields

by: gregincolumbus | last post by:

Hello I have used chained selects to populate two selects. When the user chooses from first select, he is presented with the populated data for the 2nd select. The result is a list of numbers. ...

Javascript

1286

Question about this piece of code.

by: Jianwei Sun | last post by:

I am reading a peice of code which is at the following link: http://www.brpreiss.com/books/opus4/html/page141.html#SECTION007123000000000000000 The code is like this: Object&...

C / C++

1105

Re: Question about this piece of code.

by: Jianwei Sun | last post by:

Hello Alf, Thank you, and I like "that could be like interpreting as favorably as possible the writings of a chimpanzee posing as a college professor.". However, I will still read this...

C / C++

1854

Injecting a piece of html in all applications in IIS

by: rh.krish | last post by:

Hi, I have a unique situation. We have many applications (approx - 20) built on .NET framework 1.1 & 2.0 and hosted in one single IIS website in PROD. We have similar setup in TEST. Now we want to...

ASP.NET

7228

What is ONU?

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,...

General

7393

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

7058

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

5635

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

5057

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

3191

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1565

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

769

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

426

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General