爲什麼警報/運行的console.log使用jQuery拖放

我有下面的HTML結構不同的量：爲什麼警報/運行的console.log使用jQuery拖放

<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其拖放到其他的div類cols_table_row：

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) {} 
});

這裏是日誌輸出，當我拖動的div id爲col_0並將其放到與ID COL_1股利。我確定它：

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

但是，當我拖動的div id爲COL_1並將其與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警報都顯示在這兩種情況下，而不是8例＃2用的console.log

來源

2017-03-14 Didier mac cormick

問題是什麼？ - _「'console.log' /'alert'」_和_「有什麼區別爲什麼'alert' /'console.log'運行不同的數量」_是非常不同的問題... – evolutionxbox

當我運行你的jsfiddle並將'alert'更改爲'console.log'我無法重現與您相同的問題。其次，你確定在檢查控制檯之前，你沒有試圖拖動該行2次。如果沒有，請編輯你的小提琴重新創建問題 –

同一捏..... – user7417866

我解決離開jQuery的問題並提出一個100％的JavaScript代碼。我認爲這個問題來自構建用戶界面然後調用腳本的函數。感謝所有。

來源

2017-03-14 15:42:31

爲什麼警報/運行的console.log使用jQuery拖放

回答

相關問題