javascript - HTML 表格 onDrop 事件

Question

我有一个 HTML 表，我有一个鼠标按下事件和一个鼠标按下事件，并且拖放行效果很好。我唯一的问题是我不知道如何确定放置何时完成。我需要循环表行并使用它们的行 ID 将排序顺序保存到数据库中。如果我使用鼠标向上调用它，则不会发生下降。我已经看到一个 div 可以有一个 dropend 或 onDrop 事件，但不能有一个表。这可能吗？

标签： javascripthtml

Answer 1

我能够挖掘更多并想出了一些有用的东西

        $(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