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 Post Reply

20461

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

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

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

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

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

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

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

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

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

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

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

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

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

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

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp