Enable drag and drop to the text between <span></span>

Discussion in 'Javascript' started by Wang, Jay, May 21, 2004.

  1. Wang, Jay

    Wang, Jay Guest

    Hello, all,
    I would like to enable some text between <SPAN
    url="http://www.testserver.com/">WORD TO BE DRAGGED </SPAN>. I put some
    javascript and it will extract http://www.testserver.com/ from the the span
    element when I select the whole text in the SPAN and drag it.

    However, I want to drag it without have to select the words between the span
    element. The default mouse action will only select the words when i move the
    mouse. Can someone point me to the right direction? thanks.

    Best Regards,
    Jay
     
    Wang, Jay, May 21, 2004
    #1
    1. Advertising

  2. Wang, Jay

    Wang, Jay Guest

    Thank you, YEP, here is the source code of the HTML file. If i can enable
    the drag and drop on the span element without selecting it and then when the
    span element is dropped, only the "title" information is dropped on the
    target OUTLOOK. Does this make sense this time? I'm sorry if I didn't ask
    the question clearly. Hope the source code will be helpful to get us on the
    right track.

    Jay

    ------------------------------------------------

    <html xmlns:sp>
    <head>
    </head>
    <script language="javascript">

    /* ----------------------------------------------

    Used to query for drag and drop

    -------------------------------------------------*/

    function initDropInfo(span)
    {
    var objEl = window.event.srcElement;
    var src = objEl.src
    var str= objEl.getAttribute("title");

    window.event.dataTransfer.setData("TEXT",str);
    window.event.dataTransfer.effectAllowed = "copyLink";
    window.event.dataTransfer.dropEffect = 'move';
    }

    </script>


    <body>
    <span id="test" ondragstart="initDropInfo(this)"
    title="http://www.test.com/test1.html" style='cursor:hand; color:blue;'
    >test drag and drop link</span> to extract "title" information in span

    element.

    </body>
    </html>

    ------------------------------------------------





    "Yann-Erwan Perio" <> wrote in message
    news:40ae8ca0$0$10963$...
    > Wang, Jay wrote:
    >
    > Hello,
    >
    > > Is there a problem to drag it with out selecting the element
    > > <span>?
    > > At this point, I will only need to make it work with IE.

    >
    > If you're using only IE, then you should have a look at the
    > clipboardData and dataTransfer objects, which permit to customize the
    > drag and drop.
    >
    >

    <URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_d
    atatransfer.asp>
    >
    > AIUI, these objects can only be used in IE, in other hosts you'd have to
    > check the relevant object model.
    >
    > > I tried something to extract information from span element, but
    > > the result only show up in some non-html compliant editor.

    >
    > A non-HTML compliant editor? Hmmm, that sounds familiar...Would you be
    > using FP or DW;-)
    >
    > > Outlook will
    > > display the original stuff with html code hidden, which means if the

    <span
    > > title="foo bar" styles="color:blue;">foo bar</span> is dragged into

    outlook,
    > > the result will be a blue text with hidden information in it.

    >
    > I can perfectly imagine that, though I cannot reproduce the problem
    > here. I'm unsure of what to do, to me that's a system setting, probably
    > in Outlook - check the relevant archives at http://groups.google.com/ or
    > wait for the knowledgeable to step by:)
    >
    > Unless I've completely misunderstood what you want to do, I don't think
    > you're in the right group - check the microsoft.public.* hierarchies for
    > Outlook newsgroups.
    >
    >
    > Regards,
    > Yep.
     
    Wang, Jay, May 24, 2004
    #2
    1. Advertising

  3. Wang, Jay wrote:

    > If i can enable
    > the drag and drop on the span element without selecting it and then when the
    > span element is dropped, only the "title" information is dropped on the
    > target OUTLOOK. Does this make sense this time?


    Much more sense indeed:)

    The following will do, you were very close. Note that the link
    capability only works when the message format is 'text' (Outlook
    recognizes the dropped string to be a string, and puts a link around it)
    - the way the string is treated should indeed depend on the receiving
    host, and I don't think you can do much about this.

    This is IE5.5+ only.


    <script type="text/jscript">
    function mdown(span){
    var rng;
    if(document.body && document.body.createTextRange){
    rng=document.body.createTextRange();
    rng.moveToElementText(span);
    rng.select();
    }
    }

    function mdrag(span){
    var url=span.title;
    if(window.event && window.event.dataTransfer){
    with(window.event.dataTransfer){
    setData("text", url);
    effectAllowed="copy";
    dropEffect="move";
    }
    }
    }
    </script>

    <div>
    This is a
    <span
    id="test"
    onmousedown="mdown(this)"
    ondragstart="mdrag(this)"
    title="http://www.test.com/test1.html"
    style="cursor:hand; color:blue;">test drag and drop link</span>
    to extract "title" information in span element.
    </div>


    HTH
    Yep.
     
    Yann-Erwan Perio, May 24, 2004
    #3
  4. Wang, Jay

    Wang, Jay Guest

    This is awesome, YEP, you are the man!! :)
    I saw the script still select the text between <SPAN> and then enable the
    dragdrop action. This is very nice.

    I'm wondering if we can control the default behavior of the mouse from
    selecting text to none. basically, if i have a link html looks like: <a
    href="http://test.com/test.html">test link should be dragged and dropped as
    a whole entity</a>
    The link will be dragged as an entity without having to selecting it. Are
    there some tricks to enable this behavior on <span>?

    Outlook display the whole <span> section and discard the javascipt action
    definitely has something to do with the text being selected in the first
    place.

    Thanks again, Yann, You are extremely helpful.

    Jay

    "Yann-Erwan Perio" <> wrote in message
    news:40b246fd$0$29905$...
    > Wang, Jay wrote:
    >
    > > If i can enable
    > > the drag and drop on the span element without selecting it and then when

    the
    > > span element is dropped, only the "title" information is dropped on the
    > > target OUTLOOK. Does this make sense this time?

    >
    > Much more sense indeed:)
    >
    > The following will do, you were very close. Note that the link
    > capability only works when the message format is 'text' (Outlook
    > recognizes the dropped string to be a string, and puts a link around it)
    > - the way the string is treated should indeed depend on the receiving
    > host, and I don't think you can do much about this.
    >
    > This is IE5.5+ only.
    >
    >
    > <script type="text/jscript">
    > function mdown(span){
    > var rng;
    > if(document.body && document.body.createTextRange){
    > rng=document.body.createTextRange();
    > rng.moveToElementText(span);
    > rng.select();
    > }
    > }
    >
    > function mdrag(span){
    > var url=span.title;
    > if(window.event && window.event.dataTransfer){
    > with(window.event.dataTransfer){
    > setData("text", url);
    > effectAllowed="copy";
    > dropEffect="move";
    > }
    > }
    > }
    > </script>
    >
    > <div>
    > This is a
    > <span
    > id="test"
    > onmousedown="mdown(this)"
    > ondragstart="mdrag(this)"
    > title="http://www.test.com/test1.html"
    > style="cursor:hand; color:blue;">test drag and drop link</span>
    > to extract "title" information in span element.
    > </div>
    >
    >
    > HTH
    > Yep.
     
    Wang, Jay, May 25, 2004
    #4
  5. Wang, Jay wrote:

    > I'm wondering if we can control the default behavior of the mouse from
    > selecting text to none.


    We can, but the drag and drop needs some text to be selected in order to
    be triggered, so that wouldn't work (you can however clear the selection
    *after* the drag has started, see below).

    > The link will be dragged as an entity without having to selecting it. Are
    > there some tricks to enable this behavior on <span>?


    I don't think so, moreover in my computer the link is dragged as an
    attachment in Outlook:) Of course you could create a link before
    starting the drag, put the SPAN inside and remove it afterwards, but...
    why not use a link straightforward if the behavior it exposes just
    happens to be what you're looking for?

    > Outlook display the whole <span> section and discard the javascipt action
    > definitely has something to do with the text being selected in the first
    > place.


    An interesting hypothesis, which turns out to be true to a certain
    extent. Just use:

    function mdrag(span){
    var url=span.title;
    document.selection.empty();
    if(window.event && window.event.dataTransfer){
    with(window.event.dataTransfer){
    effectAllowed="copyLink";
    dropEffect="move";
    setData("text", url);
    }
    }
    }

    ....instead of the previous mdrag function and see if that works the way
    you want.

    > Thanks again, Yann, You are extremely helpful.


    Well I'm glad if that helps, but I'm still missing the big picture! If
    you could provide more insight on the context then we might suggest
    other approaches, perhaps more adapted to the situation (unless you're
    dealing with a very specific requirement).


    Regards,
    Yep.
     
    Yann-Erwan Perio, May 25, 2004
    #5
  6. Wang, Jay

    Wang, Jay Guest

    Thanks a lot, YEP. You understand me so well. :)
    "document.selection.empty();" solved every problem. Outlook is taking the
    extracted properties perfectly right now.
    I appreciate your help so much. Thanks a million! :)

    Jay

    "Yann-Erwan Perio" <> wrote in message
    news:40b39b17$0$19634$...
    > Wang, Jay wrote:
    >
    > > I'm wondering if we can control the default behavior of the mouse from
    > > selecting text to none.

    >
    > We can, but the drag and drop needs some text to be selected in order to
    > be triggered, so that wouldn't work (you can however clear the selection
    > *after* the drag has started, see below).
    >
    > > The link will be dragged as an entity without having to selecting it.

    Are
    > > there some tricks to enable this behavior on <span>?

    >
    > I don't think so, moreover in my computer the link is dragged as an
    > attachment in Outlook:) Of course you could create a link before
    > starting the drag, put the SPAN inside and remove it afterwards, but...
    > why not use a link straightforward if the behavior it exposes just
    > happens to be what you're looking for?
    >
    > > Outlook display the whole <span> section and discard the javascipt

    action
    > > definitely has something to do with the text being selected in the first
    > > place.

    >
    > An interesting hypothesis, which turns out to be true to a certain
    > extent. Just use:
    >
    > function mdrag(span){
    > var url=span.title;
    > document.selection.empty();
    > if(window.event && window.event.dataTransfer){
    > with(window.event.dataTransfer){
    > effectAllowed="copyLink";
    > dropEffect="move";
    > setData("text", url);
    > }
    > }
    > }
    >
    > ...instead of the previous mdrag function and see if that works the way
    > you want.
    >
    > > Thanks again, Yann, You are extremely helpful.

    >
    > Well I'm glad if that helps, but I'm still missing the big picture! If
    > you could provide more insight on the context then we might suggest
    > other approaches, perhaps more adapted to the situation (unless you're
    > dealing with a very specific requirement).
    >
    >
    > Regards,
    > Yep.
     
    Wang, Jay, May 25, 2004
    #6
    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. Oliver Klein
    Replies:
    0
    Views:
    695
    Oliver Klein
    Aug 24, 2003
  2. inga2005
    Replies:
    2
    Views:
    316
    inga2005
    Jun 17, 2008
  3. CK

    Enable Drag and Drop

    CK, Dec 27, 2006, in forum: Javascript
    Replies:
    0
    Views:
    82
  4. Replies:
    2
    Views:
    474
  5. Replies:
    0
    Views:
    179
Loading...

Share This Page