Question

I have created one application using drag and drop table row elements. In that I want to get the dropped element id(ie, table id where I dropped). I tried with mouse up event. but i can't get the correct answer.

I was using tablednd plugin.

I have two tables. In that I will drag and drop tr from one table to another table.
In that I want to get dropped table id.

<script src="<?php echo base_url(); ?>assets/js/drag/jquery.tablednd_0_5.js" type="text/javascript"></script>
 <script type="text/javascript">
    $(document).ready(function () {
        $(".tbl_repeat tbody").tableDnD({
            onDrop: function (table, row) {
                var orders = $.tableDnD.serialize();
                //console.log(orders);
                // alert(table.id);
                //alert($('td').closest('table')[2].id);
                //$.post('<?php echo base_url(); ?>dashboard/order_update', { orders : orders });
            }
        });
</script>

I was using this function to get the dropped table id:

document.body.onmouseup = function (e) {
    e = e || window.event;
    var elementId = (e.target || e.srcElement).id;
    // call your re-create function
    recreate(elementId);
    // ...
}

function recreate(id) {
    alert(id);
}

HTML

 <table id="tbl1" class="table-striped table-bordered table-responsive tbl_repeat" style="width:100%;">
<tbody id="hai1">
<tr>
</tr>
</tbody>
  </table>

<table id="tbl2" class="table-striped table-bordered table-responsive tbl_repeat" style="width:100%;">
<tbody id="hai1">
<tr>
</tr>
</tbody>
  </table>

<table id="tbl3" class="table-striped table-bordered table-responsive tbl_repeat" style="width:100%;">
<tbody id="hai1">
<tr>
</tr>
</tbody>
  </table>

Thanks in advance.

Answer 1

Please see if you get some help from this sample code

  
   
   $(document).ready(function () {
            $('.ClsTBL').hover(
                function () { console.log('hovering on', $(this).attr('id')); }, // You can add your functions
                function () { }
         );
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<div>
            <table id="MyTbl1" class="ClsTBL">
                <tr>
                    <td>Test</td>
                    <td>Test 1</td>
                </tr>
            </table>

            <table id="MyTbl2" class="ClsTBL">
                <tr>
                    <td>Test</td>
                    <td>Test 1</td>
                </tr>
            </table>
        </div>
        </body>
        </html>

Answer 2

You can use this

$(".tbl_repeat tbody").tableDnD({
            onDrop: function (table, row) {
               var tableId = $(this).parents('table').attr('id');
               console.log(tableId);
               var orders = $.tableDnD.serialize();

            }
        });

Answer 3

karthick try like this

   onDrop: function (table, row) {
            var orders = $.tableDnD.serialize();
            var t=$(table);
            console.log(t.attr('id'));
            //console.log(orders);
            // alert(table.id);
            //alert($('td').closest('table')[2].id);
            //$.post('<?php echo base_url(); ?>dashboard/order_update', { orders : orders });
        }

Answer 4

 var TableID= "";

    $(document).ready(function () {
        $('.ClsTBL').hover(TableID =  $(this).attr('id')); 

        $(".tbl_repeat tbody").tableDnD({
            onDrop: function (table, row) {
                alert(TableID);

            }
        });

    });

get table id using mouse up event

4 个答案: