Loading ...
Sorry, an error occurred while loading the content.

[Drag & Drop] How to prevent the text node being select when dragging

Expand Messages
  • Vanessa Pai
    Hi, I am building a drag & drop application based on the Sortable List example. In my application, the user has a list of fixed width rectangle bar (LI
    Message 1 of 7 , Jul 24, 2007
    • 0 Attachment
      Hi,
      I am building a drag & drop application based on the 'Sortable List'
      example. In my application, the user has a list of fixed width
      rectangle bar (LI elements)which they can drag and drop to resort the
      list.
      The problem I am having right now is that sometimes the drag action
      will be treated as text-selection action if the action start on top of
      the text description.

      I tried to disable the text select event by assigning empty function
      to onselectstart, but then if the drag action start on top of the
      text, nothing happens, not even the real drag action.(It is required
      that any area inside the rectangle could trigger the drag and drop in
      my project, so I can't avoid the text area.)

      Any hints or suggestions will be very much appreciated.

      Thanks,
      Vanessa
    • Mark Ireland
      It gets worse depending on what you might have your text wrapped in. Images (even animated gifs) work, tables with images in the cell work, but tables with
      Message 2 of 7 , Jul 24, 2007
      • 0 Attachment
        It gets worse depending on what you might have your text wrapped in.
        Images (even animated gifs) work, tables with images in the cell work, but
        tables with just text in the cell will not drag (that particular li element
        anyway)

        >From: "Vanessa Pai" <vann_p@...>
        >Reply-To: ydn-javascript@yahoogroups.com
        >To: ydn-javascript@yahoogroups.com
        >Subject: [ydn-javascript] [Drag & Drop] How to prevent the text node being
        >select when dragging
        >Date: Tue, 24 Jul 2007 20:44:43 -0000
        >
        >Hi,
        >I am building a drag & drop application based on the 'Sortable List'
        >example. In my application, the user has a list of fixed width
        >rectangle bar (LI elements)which they can drag and drop to resort the
        >list.
        >The problem I am having right now is that sometimes the drag action
        >will be treated as text-selection action if the action start on top of
        >the text description.
        >
        >I tried to disable the text select event by assigning empty function
        >to onselectstart, but then if the drag action start on top of the
        >text, nothing happens, not even the real drag action.(It is required
        >that any area inside the rectangle could trigger the drag and drop in
        >my project, so I can't avoid the text area.)
        >
        >Any hints or suggestions will be very much appreciated.
        >
        >Thanks,
        >Vanessa
        >

        _________________________________________________________________
        Movie session times on Messenger - add Movie Scout today!
        http://ninemsn.com.au/share/redir/adTrack.asp?mode=click&clientID=785&referral=hotmailtagline0707&URL=http://www.yourmovies.com.au/messenger/signup/
      • Eric Miraglia
        Vanessa, Are you describing a situation where you have form input fields inside of a draggable object? If so, what is your desired interaction -- it seems
        Message 3 of 7 , Jul 25, 2007
        • 0 Attachment
          Vanessa,

          Are you describing a situation where you have form input fields inside of a draggable object?  If so, what is your desired interaction -- it seems that you'd need the user to be able to input text in the textarea while dragging the object from other parts of its surrounding space.

          Regards,
          Eric

          ______________________________________________
          Eric Miraglia
          Yahoo! User Interface Library



          On Jul 24, 2007, at 1:44 PM, Vanessa Pai wrote:

          Hi,
          I am building a drag & drop application based on the 'Sortable List'
          example. In my application, the user has a list of fixed width
          rectangle bar (LI elements)which they can drag and drop to resort the
          list.
          The problem I am having right now is that sometimes the drag action
          will be treated as text-selection action if the action start on top of
          the text description.

          I tried to disable the text select event by assigning empty function
          to onselectstart, but then if the drag action start on top of the
          text, nothing happens, not even the real drag action.(It is required
          that any area inside the rectangle could trigger the drag and drop in
          my project, so I can't avoid the text area.)

          Any hints or suggestions will be very much appreciated.

          Thanks,
          Vanessa


        • gloveny
          Eric, that sounds like what I want to do. I dont want things inside the li element to be draggable, only a header which I define, say a div which sits across
          Message 4 of 7 , Jul 25, 2007
          • 0 Attachment
            Eric, that sounds like what I want to do. I dont want things inside
            the li element to be draggable, only a header which I define, say a
            div which sits across the top, or a particular image which looks like
            the drag icon to indicate that it's draggable.
            Graham
          • Vanessa Pai
            Hi, Eric: In my LI, I have SPAN element with some text description, and some action buttons grouped at right. No INPUT fields are there. Oddly enough, after
            Message 5 of 7 , Jul 25, 2007
            • 0 Attachment
              Hi, Eric:

              In my LI, I have SPAN element with some text description, and some
              action buttons grouped at right. No INPUT fields are there. Oddly
              enough, after seeing how Yahoo logger console doing fine when
              dragging, I followed the same style by replacing my SPAN into H5
              element, the annoying text selection problem no longer existed!!
              Putting the text directly under LI works too. So the text selection
              situation only happens when I use SPAN to enclose texts.

              Anyway, although my problem can be solved by using other tag to
              enclose text description, it would be nice if I get to know why.

              Thanks,
              Vanessa


              --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
              >
              > Vanessa,
              >
              > Are you describing a situation where you have form input fields
              > inside of a draggable object? If so, what is your desired
              > interaction -- it seems that you'd need the user to be able to input
              > text in the textarea while dragging the object from other parts of
              > its surrounding space.
              >
              > Regards,
              > Eric
              >
              > ______________________________________________
              > Eric Miraglia
              > Yahoo! User Interface Library
              >
              >
              >
              > On Jul 24, 2007, at 1:44 PM, Vanessa Pai wrote:
              >
              > > Hi,
              > > I am building a drag & drop application based on the 'Sortable List'
              > > example. In my application, the user has a list of fixed width
              > > rectangle bar (LI elements)which they can drag and drop to resort the
              > > list.
              > > The problem I am having right now is that sometimes the drag action
              > > will be treated as text-selection action if the action start on top of
              > > the text description.
              > >
              > > I tried to disable the text select event by assigning empty function
              > > to onselectstart, but then if the drag action start on top of the
              > > text, nothing happens, not even the real drag action.(It is required
              > > that any area inside the rectangle could trigger the drag and drop in
              > > my project, so I can't avoid the text area.)
              > >
              > > Any hints or suggestions will be very much appreciated.
              > >
              > > Thanks,
              > > Vanessa
              > >
              > >
              > >
              >
            • Vanessa Pai
              Hi, Graham: I have the same question as you described here too. (Although that s not what my original post was talking about) Right now I show the move cursor
              Message 6 of 7 , Jul 25, 2007
              • 0 Attachment
                Hi, Graham:

                I have the same question as you described here too. (Although that's
                not what my original post was talking about)

                Right now I show the move cursor only on some specific area to trick
                the user, but if they choose to drag from other area it still trigger
                the drag action.

                --- In ydn-javascript@yahoogroups.com, "gloveny" <gloveny@...> wrote:
                >
                > Eric, that sounds like what I want to do. I dont want things inside
                > the li element to be draggable, only a header which I define, say a
                > div which sits across the top, or a particular image which looks like
                > the drag icon to indicate that it's draggable.
                > Graham
                >
              • Eric Miraglia
                Vanessa, I don t have a good answer for you as to why the in your was not a legal drag handle. If you still see this behavior in the new 2.3.0
                Message 7 of 7 , Jul 31, 2007
                • 0 Attachment
                  Vanessa,

                  I don't have a good answer for you as to why the <span> in your <li> was not a legal drag handle.  If you still see this behavior in the new 2.3.0 release, please consider filing a but report.  Unless you're specifically causing the <span> to be an invalid drag handle, the <li> should have been draggable from within the span.

                  Regards,
                  Eric


                  ______________________________________________
                  Eric Miraglia
                  Yahoo! User Interface Library


                  On Jul 25, 2007, at 10:55 AM, Vanessa Pai wrote:

                  Hi, Eric:

                  In my LI, I have SPAN element with some text description, and some
                  action buttons grouped at right. No INPUT fields are there. Oddly
                  enough, after seeing how Yahoo logger console doing fine when
                  dragging, I followed the same style by replacing my SPAN into H5
                  element, the annoying text selection problem no longer existed!!
                  Putting the text directly under LI works too. So the text selection
                  situation only happens when I use SPAN to enclose texts.

                  Anyway, although my problem can be solved by using other tag to
                  enclose text description, it would be nice if I get to know why.

                  Thanks,
                  Vanessa

                  --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
                  >
                  > Vanessa,
                  >
                  > Are you describing a situation where you have form input fields
                  > inside of a draggable object? If so, what is your desired
                  > interaction -- it seems that you'd need the user to be able to input
                  > text in the textarea while dragging the object from other parts of
                  > its surrounding space.
                  >
                  > Regards,
                  > Eric
                  >
                  > ______________________________________________
                  > Eric Miraglia
                  > Yahoo! User Interface Library
                  >
                  >
                  >
                  > On Jul 24, 2007, at 1:44 PM, Vanessa Pai wrote:
                  >
                  > > Hi,
                  > > I am building a drag & drop application based on the 'Sortable List'
                  > > example. In my application, the user has a list of fixed width
                  > > rectangle bar (LI elements)which they can drag and drop to resort the
                  > > list.
                  > > The problem I am having right now is that sometimes the drag action
                  > > will be treated as text-selection action if the action start on top of
                  > > the text description.
                  > >
                  > > I tried to disable the text select event by assigning empty function
                  > > to onselectstart, but then if the drag action start on top of the
                  > > text, nothing happens, not even the real drag action.(It is required
                  > > that any area inside the rectangle could trigger the drag and drop in
                  > > my project, so I can't avoid the text area.)
                  > >
                  > > Any hints or suggestions will be very much appreciated.
                  > >
                  > > Thanks,
                  > > Vanessa
                  > >
                  > >
                  > >
                  >


                Your message has been successfully submitted and would be delivered to recipients shortly.