的Javascript：handleDragLeave和handleDragEnd沒有結束元素

拖就消除類的效果我有一個隨意拖動和https://jsfiddle.net/64y1280t/下降排序錶行的例子。如果您將一個項目，例如從「F」拖動到「A」，那麼您仍然會在「A」上看到黃色背景效果。但是，我已經handleDragLeave和handleDragEnd處理程序已經刪除這些影響。的Javascript：handleDragLeave和handleDragEnd沒有結束元素

HTML

<table id="columns"> 

    <tr id="a" class="column a" draggable="true"> 
      <td>A</td> 
    </tr> 

    <tr id="b" class="column b" draggable="true"> 
      <td>B</td> 
    </tr> 

    <tr id="c" class="column c" draggable="true"> 
      <td>C</td> 
    </tr> 

    <tr id="d" class="column d" draggable="true"> 
      <td>D</td> 
    </tr> 

    <tr id="e" class="column e" draggable="true"> 
      <td>E</td> 
    </tr> 

    <tr id="f" class="column f" draggable="true"> 
      <td>F</td> 
    </tr> 
</table>

CSS

table{ 
      width: 100%; 
     } 
tr{ 
    padding: 10px; 
    background-color: #eee; 
    width: 100%; 
} 
.column { 
    cursor: move; 
} 

.column.over { 
    background-color: yellow; 
} 

.sort_error{ 
    background-color: red; 
}

的JavaScript

 var dragSrcEl = null; 
     var cols = []; 

     function handleDragStart(e) { 
      dragSrcEl = this; 
      e.dataTransfer.effectAllowed = 'move'; 
      e.dataTransfer.setData('text/html', this.outerHTML); 
     } 

     function handleDragEnd(e) { 
      [].forEach.call(cols, function (col) { 
       col.classList.remove('over'); 
      }); 
     } 

     function handleDragEnter(e) { 
      this.classList.add('over'); 
     } 

     function handleDragLeave(e) { 
      this.classList.remove('over'); 
     } 

     function handleDragOver(e) { 
      if (e.preventDefault) { 
       e.preventDefault(); 
      } 

      e.dataTransfer.dropEffect = 'move'; 
      return false; 
     } 

     function handleDrop(e) { 
      if (e.stopPropagation) { 
       e.stopPropagation(); 
      } 
      dragSrcEl.outerHTML = this.outerHTML; 
      this.outerHTML = e.dataTransfer.getData('text/html'); 
      return false; 
     } 

     cols = document.querySelectorAll('#columns .column'); 
     [].forEach.call(cols, function(col) { 
      col.addEventListener('dragstart', handleDragStart, false); 
      col.addEventListener('dragenter', handleDragEnter, false) 
      col.addEventListener('dragover', handleDragOver, false); 
      col.addEventListener('dragleave', handleDragLeave, false); 
      col.addEventListener('drop', handleDrop, false); 
      col.addEventListener('dragend', handleDragEnd, false); 
     });

來源

2016-09-14 user1187968

這將解決這個問題。

function handleDrop(e) { 
    if (e.stopPropagation) { 
    e.stopPropagation(); 
    } 

    var dragSrcElHtml = dragSrcEl.outerHTML; 
    this.classList.remove("over"); 
    dragSrcEl.outerHTML = this.outerHTML; 
    this.outerHTML = dragSrcElHtml; 
    return false; 
}

來源

2016-09-14 19:37:26 user1187968

的Javascript：handleDragLeave和handleDragEnd沒有結束元素

回答

相關問題