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

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Big Bolt
    #1

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

    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?
    Tags: div onselectstart
    • Etan Bukiet
      #2
      Re: How do I make a piece of text in HTML non-selectable, but draggable?

      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>.clsSpan Drag { background-color: yellow }
      </style>
      <script>
      window.onload = function()
      {
      var el = document.getEle mentById("mySpa n");
      el.onmousedown = function()
      {
      var r = document.body.c reateTextRange( );
      r.moveToElement Text(el);
      r.select();
      }
      el.ondragstart = function(){aler t("test")}
      }
      </script>
      </head>

      <body>
      <p>this is a test <span class="clsSpanD rag" id="mySpan">thi s is a
      test</span> this is a test
      </body>

      hope this helps

      etan


      "Big Bolt" <big_bolt@hotma il.com> wrote in message
      news:3cf9944b.0 306290225.24ca2 f53@posting.goo gle.com...[color=blue]
      > 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?[/color]


        Comment

        • Big Bolt
          #3
          Re: How do I make a piece of text in HTML non-selectable, but draggable?

          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:h and;" id=myId OnMouseDown='Mo useDown()'
          OnDragStart='Dr agStart()'>my bloody text</div>

          <script>
          function OnMouseDown() {
          var obj = window.event.sr cElement;
          var r = document.body.c reateTextRange( );
          r.moveToElement Text(obj);
          r.select();
          return true;
          }

          function OnDragStart() {
          event.dataTrans fer.effectAllow ed = "all";
          return true;
          }
          </script>
          -----------------------------------------------------------------

          The power if Internet amazes me!


          "Etan Bukiet" <ebukiet@comcas t.net> wrote in message news:<Olb81KkPD HA.2852@tk2msft ngp13.phx.gbl>. ..[color=blue]
          > 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>.clsSpan Drag { background-color: yellow }
          > </style>
          > <script>
          > window.onload = function()
          > {
          > var el = document.getEle mentById("mySpa n");
          > el.onmousedown = function()
          > {
          > var r = document.body.c reateTextRange( );
          > r.moveToElement Text(el);
          > r.select();
          > }
          > el.ondragstart = function(){aler t("test")}
          > }
          > </script>
          > </head>
          >
          > <body>
          > <p>this is a test <span class="clsSpanD rag" id="mySpan">thi s is a
          > test</span> this is a test
          > </body>
          >
          > hope this helps
          >
          > etan
          >
          >
          > "Big Bolt" <big_bolt@hotma il.com> wrote in message
          > news:3cf9944b.0 306290225.24ca2 f53@posting.goo gle.com...[color=green]
          > > 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?[/color][/color]

            Comment

            Previous template Next
            Working...