相关疑难解决方法(0)

概观

我有以下HTML结构,并且我已将dragenter和dragleave事件附加到<div id="dropzone">元素.

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

问题

当我将文件拖过时<div id="dropzone">,dragenter事件将按预期触发.但是,当我将鼠标移到子元素上时,例如<div id="drag-n-drop">,dragenter为<div id="drag-n-drop">元素dragleave触发事件,然后为该<div id="dropzone">元素触发事件.

如果我<div id="dropzone">再次将鼠标悬停在该元素上,dragenter则会再次触发该事件,这很酷,但随后dragleave会为刚刚离开的子元素触发事件,因此removeClass执行该指令,这并不酷.

出于以下原因,此行为存在问题:

1. 我只安装dragenter及dragleave到<div id="dropzone">,所以我不明白为什么孩子要素附上以及这些事件.

2. 我仍然<div id="dropzone">在徘徊在它的孩子上时拖着元素,所以我不想dragleave开火!

的jsfiddle

这里有一个jsFiddle修补:http …

情况:我正在使用HTML5拖放将瓷砖放在我正在编写的游戏中.我想添加一个效果,其中两个瓷砖,我即将放置一个新的瓷砖之间稍微移动,以表明这是你正在下降的地方(类似于Mac OS底座).

我的方法:我有一个flexbox我正在丢弃这些瓷砖的东西.我写了一个函数,基本上返回一个正弦波周期,我用它来更新丢弃的瓷砖right:和top:CSS属性(瓷砖position: relative;),基于它们相对于鼠标的原始位置drag.

  // Update occupant style for desired effect
  occupants.forEach(function(occupant, index) {
    $(occupant).css({'right' : -10 * nudgeSine(occupantsMouseOffset[index] * 10) + 'px',
                     'top' : -10 * Math.abs(nudgeSine(occupantsMouseOffset[index] * 10)) + 'px',
                     'opacity' : 1 - Math.abs(nudgeSine(occupantsMouseOffset[index])) });
  });

  // Function to return 1 period of a sine wave
  function nudgeSine(x) {
    if (x < -3.14159 || x > 3.14159) {
      return 0;
    } else {
      return Math.sin(x); …

我在html5拖放时遇到了一些问题.我没有看到一个简单的方法.基本上我有一些"盒子"里面有一些其他的html元素.父框是可拖动的,它们可以相互删除.

我dragover在主体上绑定事件来处理整个页面上的拖放.问题是,当你拖动框时 - 有时会在子元素上触发事件,父母根本不会得到此事件.

有没有一种简单的方法可以防止这种情况发生？

基本上我希望dragover事件在鼠标位于目标框区域时立即触发.我知道解决这个问题的几种方法,但它们真的很难看,我想知道是否有一些简单的东西.

谢谢你的想法

我在代码中做的简短版本:

document.addEventListener('dragenter', function(e) {

    if (e.target.className == 'candrophere')
        // cancel out "e" to allow drop


}, false);

但在我的情况下,子元素几乎占据了整个'.candrophere'框,因此事件几乎从未在正确的目标上被触发(特别是当我更快地移动鼠标时)