HTML5 drag and drop events - dragLeave fires before drop_问答_开发者

HTML5 drag and drop events - dragLeave fires before drop

开发者 https://www.devze.com 2023-02-21 19:27 出处：网络

In drag and drop the dragLeave event sometimes fires before the drop event. This is causing problems because the target is getting the listeners in dragEnter with dragLeave and drop removing the list

In drag and drop the dragLeave event sometimes fires before the drop event.

This is causing problems because the target is getting the listeners in dragEnter with dragLeave and drop removing the listeners. If dragLeave 开发者_JAVA技巧fires before drop, then there is no listener for the drop.

I think the reason has something to do with another contra-intuitive: the dragEnter sometimes fires multiple times for the same target, even with propagation off. With multiple dragEnters, one would spawn a drop while the others would spawn a dragLeave. If this is the case, perhaps I could associate the dragLeave with the dragEnter - but I see no means of that coordination.

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 );
}

Here's a list of calls:

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

If the "clearing listeners" were not performed, the next step would have been:

drop: this=e8

try this

<!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>

There's rarely a reason to manage your event listeners in this way.

If you bind to drop, dragover, dragleave at the same time as you bind to dragenter do you still see the problem?

The HTML dnd api is a little bit weird when you first look at it. Depending on what you are trying to do something simple like

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

may be all the listeners you need.

HTML5 drag and drop events - dragLeave fires before drop

精彩评论

关注公众号

热门标签

图文推荐

HTML5 drag and drop events - dragLeave fires before drop

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：