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

Discussion in 'Javascript' started by Big Bolt, Jun 29, 2003.

  1. Big Bolt

    Big Bolt Guest

    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?
     
    Big Bolt, Jun 29, 2003
    #1
    1. Advertising

  2. Big Bolt

    Etan Bukiet Guest

    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" <> wrote in message
    news:...
    > 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?
     
    Etan Bukiet, Jun 29, 2003
    #2
    1. Advertising

  3. Big Bolt

    Big Bolt Guest

    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" <> wrote in message news:<>...
    > 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" <> wrote in message
    > news:...
    > > 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?
     
    Big Bolt, Jun 29, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Hearn
    Replies:
    3
    Views:
    9,480
    David Hearn
    Mar 7, 2005
  2. terry
    Replies:
    1
    Views:
    3,209
    Sandip Chitale
    Sep 30, 2003
  3. Homer
    Replies:
    1
    Views:
    531
    bruce barker
    Jul 27, 2007
  4. Patrick Plattes

    Download a file piece by piece

    Patrick Plattes, Nov 30, 2006, in forum: Ruby
    Replies:
    2
    Views:
    237
    Patrick Plattes
    Nov 30, 2006
  5. Paul

    making text non-selectable

    Paul, May 27, 2004, in forum: Javascript
    Replies:
    2
    Views:
    90
    Thomas 'PointedEars' Lahn
    May 29, 2004
Loading...

Share This Page