У меня есть таблица 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 менять местоположение?
evt.preventDefault();
вdrop
прослушиватель. - person Teemu   schedule 01.02.2016stopPropagation
какpreventDefault
. @Teemu Опубликовать как ответ для респ. - person Phrogz   schedule 01.02.2016addEventListener
, нет необходимости проверять, существуют лиevt.stopPropagation
илиevt.preventDefault
, они наверняка будут существовать, если существуетaddEventListener
. - person Teemu   schedule 01.02.2016