locked
How to drag anchor text and drop to another div RRS feed

  • Question

  • User264732274 posted

    suppose i have table and table has column head. each column head text is inside anchor text. now i want to drag column head text and drop to another div. the moment drop to another div then that text will be added to another div inside span.

    sample table

    <div id='filter'></div>

    <table ID="tblSample"> <thead> <tr> <th><a href="#">ID</a></th> <th><a href="#">Name</a></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>keith</td> </tr> <tr> <td>2</td> <td>Matt</td> </tr> <tr> <td>3</td> <td>Simon</td> </tr> </tbody> </table>

    when user drag the text ID or Name on filter div then i want to add that text ID or Name to filter div when drop. how to achieve this with jquery?

    if possible discuss with code sample. thanks

    Wednesday, January 13, 2016 11:09 AM

Answers

  • User61956409 posted

    Hi sudip_inn,

    suppose i have table and table has column head. each column head text is inside anchor text. now i want to drag column head text and drop to another div. the moment drop to another div then that text will be added to another div inside span.

    According to your description, I create the following sample for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            #filter {
                width: 50px;
                height: 30px;
                border: 1px solid #aaaaaa;
            }
        </style>
        <script>
            function allowDrop(ev) {
                ev.preventDefault();
            }
    
            function drag(ev) {
                ev.dataTransfer.setData("text", ev.target.id);
            }
    
            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.innerHTML = "";
    
                var cln = document.getElementById(data).cloneNode(true);
                ev.target.appendChild(cln);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id='filter' ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
                <table id="tblSample">
                    <thead>
                        <tr>
                            <th><a id="drag1" href="#" draggable="true" ondragstart="drag(event)">ID</a></th>
                            <th><a id="drag2" href="#" draggable="true" ondragstart="drag(event)">Name</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>keith</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Matt</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Simon</td>
                        </tr>
    
                    </tbody>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 14, 2016 5:33 AM

All replies

  • User61956409 posted

    Hi sudip_inn,

    suppose i have table and table has column head. each column head text is inside anchor text. now i want to drag column head text and drop to another div. the moment drop to another div then that text will be added to another div inside span.

    According to your description, I create the following sample for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style>
            #filter {
                width: 50px;
                height: 30px;
                border: 1px solid #aaaaaa;
            }
        </style>
        <script>
            function allowDrop(ev) {
                ev.preventDefault();
            }
    
            function drag(ev) {
                ev.dataTransfer.setData("text", ev.target.id);
            }
    
            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.innerHTML = "";
    
                var cln = document.getElementById(data).cloneNode(true);
                ev.target.appendChild(cln);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div id='filter' ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
                <table id="tblSample">
                    <thead>
                        <tr>
                            <th><a id="drag1" href="#" draggable="true" ondragstart="drag(event)">ID</a></th>
                            <th><a id="drag2" href="#" draggable="true" ondragstart="drag(event)">Name</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>keith</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Matt</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Simon</td>
                        </tr>
    
                    </tbody>
                </table>
            </div>
        </form>
    </body>
    </html>
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 14, 2016 5:33 AM
  • User-744022866 posted

    Use JqueryUI draggable, it is completly customizable.

    https://jqueryui.com/draggable/

    Thursday, January 14, 2016 5:49 AM
  • User264732274 posted

    i test your code but this is not working. see js fiddle link https://jsfiddle.net/37ys7m3m/

    in your screen shot i have seen when u drag id to then text added to div but when u add name text to filter div then id text was removed. i want whatever will be drag to filter div then old text will not be removed.

    how to achieve this? looking for code sample. thanks

    Thursday, January 14, 2016 7:21 AM
  • User61956409 posted

    Hi sudip_inn,

    i want whatever will be drag to filter div then old text will not be removed.

    You could comment out the following code.

    ev.target.innerHTML = "";

    Best Regards,

    Fei Han

    Thursday, January 14, 2016 7:32 AM
  • User264732274 posted

    see this https://jsfiddle.net/37ys7m3m/ link where i copy u r code but not working.

    how to achieve the same with jquery?

    Thursday, January 14, 2016 7:42 AM
  • User264732274 posted

    issue sorted. your code is working. thanks

    Thursday, January 14, 2016 8:04 AM