AngularJS拖放事件侦听器不起作用答案

【问题标题】：AngularJS Drag and Drop event listner not workingAngularJS拖放事件侦听器不起作用
【发布时间】：2016-03-18 16:07:34
【问题描述】：

通过学习article，我正在尝试开发我的拖放功能，但它不起作用。这是我的Code。

我面临的问题是我的事件没有触发。有人可以帮我吗？当我将滑动我按钮移动到任何形状时，我想调用控制器 dd 中提到的警报。如果滑动我的按钮落在红色三角形上，我希望我会警告掉在红色上并且与其他形状相同

 el.addEventListener('drop', function(e) {
    debugger;
    if (e.stopPropagation) e.stopPropagation(); // Stops some browsers from redirecting.
    this.classList.remove('over');

    var item = document.getElementById(e.dataTransfer.getData('Text'));
    this.appendChild(item);

    scope.$apply('drop()');

    return false;
  }, false);

谢谢，

【问题讨论】：

当你做什么时，会发生什么？
当我将滑动我按钮移动到我想要调用控制器 dd 中提到的警报的任何形状时。如果滑动我的按钮落在红色三角形上，我希望我会警告掉在红色上，并且与其他形状相同
对我来说，在 Windows 7 上的最新 Chrome 中，它适用于底部蓝色区域，但不适用于其他区域。这应该是一个很好的起点。
我也可以让它在红色和绿色中工作，但这是一个非常狭窄的区域，我必须放入。我认为你的拖放是有效的，但在你定义它可以在哪里的某个地方删除有一个问题。
Here's a picture of what I'm seeing. 蓝色矩形是包含底部三角形的 div。如果我将圆圈拖到左侧或右侧三角形上，但我仍在那个蓝色区域内，它不会掉落。如果您将圆圈拖动到任一三角形但高于该区域，您将能够成功放置并触发正确的事件。

标签： javascript jquery angularjs angularjs-directive angularjs-scope

【解决方案1】：

这主要是一个 CSS 问题。蓝色三角形覆盖了大部分红色和绿色三角形，并且在 DOM 中更高。如果我掉入未覆盖的部分，我会看到红色和绿色三角形警报很好。您看到的突出显示的蓝色矩形是蓝色三角形占据的 DOM 空间，也就是它的可点击区域。

【讨论】：

在您指向这两个框的链接中，左侧的 bin 仅有很小的空间可用于注册事件，因为右侧的 bin 覆盖了大部分空间。这实际上是完全相同的情况。两个 codepen 示例都有效，并且在这两个示例中，一个元素覆盖了大多数其他元素。