javascript - AngularJS 中的 DragOver 和 DragLeave

Question

我正在尝试创建一个元素，用户可以在拖动元素时将鼠标悬停在其上以缓慢向下滚动页面。这是支持我的拖放编辑器所必需的。

我正在检测用户是否将鼠标悬停在 anchor 上并进行拖动，如果是，我会启动一个 $interval ，在其中启动缓慢滚动。如果鼠标离开 anchor ，或者用户停止拖动，则应该取消缓慢滚动，但事实并非如此。下面是我的代码。

elem.on('dragover', mouseOver);

elem.on('dragleave', mouseLeave);
elem.on('dragend', mouseLeave);

var scroller = null;

function mouseOver(ev) {
    ev.preventDefault();

    console.log('over');

    scroller = $interval(function () {
        if (!scrolledToBottom()) {
            $(window).scrollTop($(window).scrollTop() + 1);
        }
    }, 10);

}

function mouseLeave(ev) {
    ev.preventDefault();

    console.log('left');

    $interval.cancel(scroller);
    scroller = null;
}

function scrolledToBottom() {
    return ($(window).scrollTop() + $(window).height()) == 
    $(document).height();
}

尽管 console.log 的火很好，但滚动条永远不会停止滚动。我认为这是因为 Angular 在触发事件时无法看到事件内部，并且无法将更改应用到滚动条。然而，Angular 没有 ngDragOver，我只能想到 JQuery 实现。

有什么建议吗？

Answer 1

您的代码的问题是您注册了类似的事件elem.on('dragover', mouseOver)、elem.on('dragleave', mouseLeave)和 elem.on('dragend', mouseLeave) 和 doc mentions 在操作过程中，会触发多种事件类型，并且某些事件类型可能会触发多次(例如，拖动和拖动事件类型)。

例如，您的 dragover 事件处理程序如下所示:

function mouseOver(ev) {
    ev.preventDefault();

    console.log('over');

    scroller = $interval(function () {
        if (!scrolledToBottom()) {
            $(window).scrollTop($(window).scrollTop() + 1);
        }
    }, 10);

}

因此，上述事件处理程序将多次触发 $interval 多次注册，并且会丢失对旧 Promise 的引用。

通过使用以下检查修复该问题:

var scroller  = null;
function mouseOver(ev) {
    ev.preventDefault();

    console.log('over');

    if (scroller === null) {  // <-- This check will prevent multiple $interval registration.
        scroller = $interval(function () {
            if (!scrolledToBottom()) {
                $(window).scrollTop($(window).scrollTop() + 1);
            }
        }, 10);
    }

}

我将删除elem.on('dragleave', mouseLeave)事件处理程序注册调用，因为如果注册了该事件处理程序，一旦开始元素拖动也会立即调用。从而取消自定义 scoll 逻辑。

此外，我建议更改您的 dragend 事件处理程序，以便在取消 $interval 之前进行检查，例如(这只是为了代码清晰起见):

function mouseLeave(ev) {
    ev.preventDefault();

    if (scroller !== null) {  // <-- Make a check before cancelling the 
        $interval.cancel(scroller);
        scroller = null;
    }

}

这是一个可以尝试的工作示例:

angular.module('myApp', [])
  .directive('drag', function($interval) {
    return {
      restrict: 'A',
      link: function(scope, elem, attrs, ctrl) {

        elem.on('dragover', mouseOver);
        elem.on('dragend', mouseLeave);

        var scroller = null;

        function mouseOver(ev) {
          ev.preventDefault();

          if (scroller === null) {
            scroller = $interval(function() {
              if (!scrolledToBottom()) {
                $(window).scrollTop($(window).scrollTop() + 1);
              }
            }, 10);
          }

        }

        function mouseLeave(ev) {
          ev.preventDefault();

          if (scroller !== null) {
            $interval.cancel(scroller);
            scroller = null;
          }

        }

        function scrolledToBottom() {
          return ($(window).scrollTop() + $(window).height()) ==
            $(document).height();
        }
      }
    }

  });

.container {
  padding: 0;
  margin: 0;
  background: blue;
  height: 800px;
}

.container .drag {
  height: 300px;
}

.container .drag a {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js "></script>

<div ng-app="myApp">

  <div class="container">
    
    <div class="drag">
      <a href="" drag>Drag Me</a>
    </div>

  </div>

</div>