javascript - example - Eventos de arrastrar y soltar HTML5: dragDejar los incendios antes de soltar
drag and drop jquery example (2)
Al arrastrar y soltar, el evento dragLeave a veces se dispara antes del evento drop.
Esto está causando problemas debido a que el objetivo está haciendo que los oyentes entren en dragEnter con dragLeave y descarte eliminando los oyentes. Si dragLeave se dispara antes del drop, entonces no hay listener para el drop.
Creo que la razón tiene algo que ver con otra contra-intuitiva: el dragEnter a veces dispara varias veces para el mismo objetivo, incluso con la propagación desactivada. Con múltiples arrastreEnters, uno generaría una gota mientras que los otros generarían un dragLeave. Si este es el caso, quizás podría asociar el dragLeave con el dragEnter, pero no veo ningún medio para esa coordinación.
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 );
}
Aquí hay una lista de llamadas:
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
Si los "oyentes de compensación" no se realizaron, el siguiente paso habría sido:
drop: this=e8
Rara vez hay una razón para administrar a los oyentes de su evento de esta manera.
Si te unes a drop, dragover, dragleave al mismo tiempo que te unes a dragenter, ¿aún ves el problema?
El HTML dnd api es un poco extraño cuando lo miras por primera vez . Dependiendo de lo que estés tratando de hacer algo simple como
onDragOver=function(e) { e.stopPropagation() }
onDrop=function(e) { /* handle drop */ }
pueden ser todos los oyentes que necesitas.
prueba esto
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag it</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>