为什么 alert/console.log 使用 Jquery Drag & Drop 运行不同的数量

Question

我的 HTML 结构如下：

<div id="table_wrapper">
<div class="rows_table" id="rows_table_row_0">
    <div class="rows_table_row highlight-row-0" id="row_0">
        <div class="rows_table_cell rows_table_cell_small">row</div>
        <div class="rows_table_cell rows_table_cell_small">0</div>
        <div class="rows_table_cell rows_table_cell_small">TR</div>
        <div class="rows_table_cell rows_table_cell_big">sujet ligne_booleen cBackCouleurTab3</div>
        <div class="rows_table_cell rows_table_cell_button"><button id="remove-row-0" class="button_remove_row"><img src="remove_row-25.png"></button></div>
        <div class="rows_table_cell rows_table_cell_button"><button id="select-row-0-col" class="button_select_col"><img src="select_col-25.png"></button></div>
    </div>
</div>
<div class="cols_table" id="cols_table_row_0">
    <div class="cols_table_body" id="cols_table_row_0_body">
        <div class="cols_table_row" draggable="true" id="col_0">
            <div class="cols_table_cell cols_table_cell_small">col</div>
            <div class="cols_table_cell cols_table_cell_small">0</div>
            <div class="cols_table_cell cols_table_cell_small">TD</div>
            <div class="cols_table_cell cols_table_cell_middle">sujetCase3</div>
            <div class="cols_table_cell cols_table_cell_middle">ghj</div>
            <div class="cols_table_cell cols_table_cell_middle">false</div>
            <div class="cols_table_cell cols_table_cell_button"><button id="remove-col-0" class="button_remove_col"><img src="remove_col-25.png"></button></div>
        </div>
        <div class="cols_table_row" draggable="true" id="col_1">
            <div class="cols_table_cell cols_table_cell_small">col</div>
            <div class="cols_table_cell cols_table_cell_small">1</div>
            <div class="cols_table_cell cols_table_cell_small">TD</div>
            <div class="cols_table_cell cols_table_cell_middle">sujetCase6 cBackCouleurTab4</div>
            <div class="cols_table_cell cols_table_cell_middle">fghj</div>
            <div class="cols_table_cell cols_table_cell_middle">false</div>
            <div class="cols_table_cell cols_table_cell_button"><button id="remove-col-1" class="button_remove_col"><img src="remove_col-25.png"></button></div>
        </div>
    </div>
</div>

然后，使用下面的代码，我想将具有 cols_table_row 类的 div 拖放到具有 cols_table_row 类的其他 div 中：

var colIdSource;
$('.cols_table_row').on({
    dragstart: function (e) {
        colIdSource = e.target.id;
        e.originalEvent.dataTransfer.setData("colIdSource", colIdSource);
        e.originalEvent.dataTransfer.setData("rowIdSource", row.id);
    },
    dragenter: function (e) {},
    dragleave: function (e) {},
    dragover: function (e) {
        e.preventDefault();
    },
    drop: function (e) {
        var colIdTarget = $(this).attr("id");
        var colIdSource = e.originalEvent.dataTransfer.getData("colIdSource");
        if (colIdSource !== colIdTarget) {
            var rowIdSource = e.originalEvent.dataTransfer.getData("rowIdSource");
            var rowIdTarget = $(this).parent().attr("id");

            console.log("colIdSource = " + colIdSource);
            console.log("colIdTarget = " + colIdTarget);
            console.log("rowIdSource = " + rowIdSource);
            console.log("rowIdTarget = " + rowIdTarget);

        }
    },
    dragend: function (e) {},
    click: function (e) {}
});

这是当我将 id 为 col_0 的 div 拖放到 id 为 col_1 的 div 中时的日志输出。我没问题：

colIdSource = col_0
colIdTarget = col_1
rowIdSource = 0
rowIdTarget = cols_table_row_0_body

但是当我将 id 为 col_1 的 div 拖放到 id 为 col_0 的 div 中时，输出乘以 2：

colIdSource = col_1
colIdTarget = col_0
rowIdSource = 0
rowIdTarget = cols_table_row_0_body
colIdSource = col_1
colIdTarget = col_0
rowIdSource = 0
rowIdTarget = cols_table_row_0_body

为什么？

Here's the jsfiddle 但使用警报而不是 console.log，并且它有效：在两种情况下都只显示 4 个警报，而不是在带有 console.log 的情况 #2 中显示 8 个

Answer 1

我解决了离开 jquery 的问题并制作了 100% 的 JavaScript 代码。 我认为问题来自构建 ui 然后调用脚本的函数。 谢谢大家。