[Javascript] Trascinare e rilasciare gli eventi HTML5: trascina gli incendi prima della caduta


Answers

Raramente c'è un motivo per gestire gli ascoltatori di eventi in questo modo.

Se ti sposti per trascinare, trascinare, trascinare contemporaneamente mentre leghi con il trascinatore, vedi ancora il problema?

L'HTML dnd api è un po 'strano quando lo guardi per la prima volta . A seconda di cosa stai provando a fare qualcosa di semplice come

onDragOver=function(e) { e.stopPropagation() }
onDrop=function(e) { /* handle drop */ }

potrebbero essere tutti gli ascoltatori di cui hai bisogno.

Question

Nel trascinamento della selezione, l'evento dragLeave a volte viene attivato prima dell'evento di rilascio.

Ciò sta causando problemi perché l'obiettivo è ottenere gli ascoltatori in dragEnter con dragLeave e rilasciare la rimozione degli ascoltatori. Se dragLeave viene attivato prima della disconnessione, non vi è alcun listener per il rilascio.

Penso che la ragione abbia qualcosa a che fare con un'altra contro-intuitiva: a volte il dragEnter spara più volte per lo stesso target, anche con la propagazione disattivata. Con dragEnters multipli, si genera una caduta mentre gli altri generano un dragLeave. Se questo è il caso, forse potrei associare il dragLeave al dragEnter - ma non vedo alcun mezzo per quella coordinazione.

function dragEnter( e ) {

  e.stopPropatation();

  // is multiple fires of dragEnter for same cell
  if( curCell == this ) return;

  curCell = this;
  curCell.addEventListener( 'drop', drop, true );
  curCell.addEventListener( 'dragover', dragOver, true );
  curCell.addEventListener( 'dragleave', dragLeave, true );

  ...
}

function dragLeave( e ) {
  e.stopPropagation();
  curCell.removeEventListener( 'drop', drop, true );
  curCell.removeEventListener( 'dragover', dragOver, true );
  curCell.removeEventListener( 'dragleave', dragLeave, true );
}
function drop( e ) {
  // do the actual work
  dragLeave( e );
}

Ecco un elenco di chiamate:

begin drag dragstart
drag enter:  this=e9 - e.target=IMG
drag enter:  this=e9 - e.target=TD
drag enter:  this=e8 - e.target=TD
drag enter:  this=e8 - adding listeners
drag enter:  this=e8 - e.target=IMG
drag leave: this=e8
clearing listeners: this=e8

Se i "clearing listers" non sono stati eseguiti, il passo successivo sarebbe stato:

drop: this=e8



Links