阻止HTML5投遞重定向Firefox

Question

我有一個帶有可拖動行的HTML表。 根據這個答案，我正在“取消” dragover事件。

dest.addEventListener( 'dragover', function(evt){
  evt.dataTransfer.dropEffect = 'copy';
  if (evt.preventDefault) evt.preventDefault();
  return false;
}, false );

對於每個MDN，我在所有正確的位置調用preventDefault() 。

dest.addEventListener( 'drop', function(evt) {
  this.classList.remove('over');
  ...
  if (evt.stopPropagation) evt.stopPropagation();
  return false;
}, false );

拖放功能可在Chrome和Safari中完美運行。 在Firefox中，拖放操作有效，然后Firefox重定向到新URL。

 var src = document.querySelector('#src tbody'), dest = document.querySelector('#dest tbody'); var people = [ {name:'Gavin', age:42}, {name:'Bjørn', age:17}, {name:'Leyla', age:24} ]; people.forEach(function(person,i){ var tr = rowFor(person); src.appendChild(tr); tr.draggable = true; tr.addEventListener( 'dragstart', function(evt){ this.classList.add('drag','selected'); evt.dataTransfer.dropEffect = 'copy'; evt.dataTransfer.setData( 'text', i ); return false; }, false ); tr.addEventListener( 'dragend', function(evt){ if (evt.preventDefault) evt.preventDefault(); this.classList.remove('drag'); return false; }, false ); }); dest.addEventListener( 'dragenter', function(evt){ this.classList.add('over'); return false; }, false ); dest.addEventListener( 'dragover', function(evt){ evt.dataTransfer.dropEffect = 'copy'; this.classList.add('over'); if (evt.preventDefault) evt.preventDefault(); return false; }, false ); dest.addEventListener( 'dragleave', function(evt){ this.classList.remove('over'); return false; }, false ); dest.addEventListener( 'drop', function(evt) { this.classList.remove('over'); var index = evt.dataTransfer.getData('Text'); var dup = rowFor( people[index] ); dest.appendChild( dup ); if (evt.stopPropagation) evt.stopPropagation(); return false; }, false ); function rowFor(obj){ var tr = document.createElement('tr'); tr.innerHTML = "<td>"+obj.name+"</td><td>"+obj.age+"</td>"; return tr; } 

 body { background:#eee } #wrap { display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; flex-grow:1; height:400px; padding:1em } table { width:200px; border-collapse:collapse; border:1px solid #ccc } tbody { background:#fff } th,td { padding:0 5px } th { text-align:left; background:#ddd } caption { background:#ccc } table.over { border:2px solid yellow } tr.selected td { background:lightblue } table { display:flex; flex-flow:column; height:100%; margin-right:4px; overflow:hidden } table caption { flex:0 0 auto; width:100%; display:block } table thead { flex:0 0 auto; width:calc(100% + 1px) } table tbody { flex:1 1 auto; display:block; overflow-y:auto } table tbody tr { width:100% } table thead, table tbody tr { display:table; table-layout:fixed } tbody tr { cursor:default } thead th:last-child, tbody td:last-child { width:33%; } 

 <div id="wrap"> <table id="src"> <caption>drag from here</caption> <thead><tr><th>name</th><th>age</th></tr></thead> <tbody></tbody> </table> <table id="dest"> <caption>drag to here</caption> <thead><tr><th>name</th><th>age</th></tr></thead> <tbody></tbody> </table> </div> 

摘錄也可在jsfiddle.net/8d96vpws/3/

如何阻止Firefox更改位置？

Answer 1

我認為首先您需要在掉落時停止動作而不檢查狀況。 這種情況在這一點上還不成立。 在此代碼中找到一些問題之后。

dest.addEventListener( 'drop', function(evt) {
  evt.preventDefault();
  evt.stopPropagation();
  this.classList.remove('over');
  ...
}, false );

見下文