CODEWITHSUNDEEP
jqueryhtml
kannan D.S
kannan D.S

Reputation: 1101

Drag and Drop table cell contents

I have a Dynamic table here. Table data includes one span also. How can drag and drop that span anywhere among table's cells? 

<table id="#our_table">
    <tr>
        <th>head1</th>
        <th>head1</th>
        <th>head1</th>
    </tr>
    <tr>
        <td><span id="event"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Upvotes: 3

Views: 27382

Answers (3)

Devima
Devima

Reputation: 1566

Or you just use drag drop html5 with this simple code (Fiddle)

<script type="text/javascript">
$(document).ready(function(){
        $('.event').on("dragstart", function (event) {
              var dt = event.originalEvent.dataTransfer;
              dt.setData('Text', $(this).attr('id'));
            });
        $('table td').on("dragenter dragover drop", function (event) {  
           event.preventDefault();
           if (event.type === 'drop') {
              var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
              de=$('#'+data).detach();
              de.appendTo($(this)); 
           };
       });
})
</script>

with this code you must also assign an id to your span tag
in this other fiddle you can see the effect with two span tags.
In this case if there is a span in the cell the drop event does not work

Upvotes: 9

AKD
AKD

Reputation: 3966

demo: http://jsfiddle.net/B93w9/

$(function() {
    $( "#our_table span" ).draggable();
    $( "#our_table td" ).droppable();
});

and rename your table's id <table id="our_table">

Upvotes: 3

Mark Rijsmus
Mark Rijsmus

Reputation: 627

If you are using jQuery you could also try the jQuery UI library. The span should be a draggable http://jqueryui.com/draggable/ and the cell a droppable http://jqueryui.com/droppable/

Upvotes: 0

Related Questions