HTML表格onDrop事件

时间:2018-11-20 03:36:44

标签: javascript html5

我有一个HTML表,该表同时具有鼠标按下事件和鼠标按下事件,并且拖放行效果很好。我唯一的问题是我无法弄清楚如何确定放下的时间。我需要循环表行并重新排序它们的行ID,以将排序顺序保存到数据库。如果我使用鼠标向上调用它,则不会发生掉线。我已经看到div在哪里可以有dropend或onDrop事件,但没有表。这可能吗?

1 个答案:

答案 0 :(得分:0)

我能够进一步挖掘出一些有用的东西

        $(function () {
        $("#citationAreaTopTable tbody").sortable({               
            appendTo: "parent",
            helper: getHelper, // "clone",
            stop: function (event, ui) {

                var attr = $(ui.item).attr('id');
                var tableName = $(this).parent().attr("id");

                $('#' + tableName + ' tr').each(function (event, ui) {
                    $(this).css('backgroundColor', 'white');
                });


                if (tableName == "citationAreaTopTable") {
                    var table = document.getElementById('citationAreaTopTable');
                    var pmidsText = '';
                    for (var i = 1; i < table.rows.length; i++) {
                        if (table.rows[i].cells.length) {
                            var id = (table.rows[i].id.substring(table.rows[i].id.indexOf("-") + 1));
                            pmidsText += id + ','
                        }
                    }
                    pmidsText = pmidsText.slice(0, -1);
                    $('#citationAreaTopList').html('<b>Selected PMIDS: </b>' + pmidsText);
                }
            },
            update: function (event, ui) {

                var tableName = $(this).parent().attr("id");
                var id = '';
                var index = 0;

                if (tableName === '"citationAreaTopTable") ') {
                  //do something
                }

                $('#' + tableName + ' tr').each(function (e, u) {
                    $(this).css('backgroundColor', 'white');
                    if (u.id) {
                        if (u.id.slice(index).length > 0) {
                            id += u.id.slice(index) + ',';
                        }
                    }

                });

                Save_Sort(id);
            }
        }).disableSelection();

这使我可以循环表并拉出行ID。