[英]Why do alert/console.log run different amounts with Jquery Drag & Drop
I have the HTML structure below : 我有以下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>
Then, with the code below I want to drag divs with class cols_table_row and drop it into other divs with class cols_table_row : 然后,使用下面的代码,我想使用类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) {}
});
Here is the log output when I drag div with id col_0 and drop it into div with id col_1. 当我使用id col_0拖动div并将其放入id为col_1的div时,这是日志输出。 I'm ok with it :
我没关系:
colIdSource = col_0
colIdTarget = col_1
rowIdSource = 0
rowIdTarget = cols_table_row_0_body
But when I drag div with id col_1 and drop it into div with id col_0, the output is multiplying by 2 : 但是当我使用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
Why ? 为什么?
Here's the jsfiddle but with alert instead of console.log, and it works : only 4 alert are displaying in both case, instead of 8 in case #2 with console.log 这里是jsfiddle但是使用alert而不是console.log,并且它可以工作:在两种情况下只显示4个警报,而不是在#2中使用console.log显示8个警报
I solved the problem leaving jquery and made a 100% javascript code. 我解决了离开jquery的问题,并制作了100%的javascript代码。 I think the problem came from functions building the ui and then calling the script.
我认为问题来自构建ui然后调用脚本的函数。 Thanks to all.
谢谢大家。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.