Question

我在使用AngularJS和JqueryUI here is a demo时遇到了问题。

angular.module("app").directive("draggable", function($timeout) {
  [...]
  function link(scope, element, attrs) {
    element.draggable({
      start: function() {
        $timeout(function() {
          scope.setDisplay(true);
        });
      },
      stop: function() {
        $timeout(function() {
          scope.setDisplay(false);
        });
      }
    });
  }
});

angular.module("app").directive("dragover", function($timeout) {
  [...]
  function link(scope, element, attrs) {
    element.droppable({
      over: function(event, ui) {
        $timeout(scope.dragover);
      }
    });
  }
});

<div ng-app="app" id="container" ng-controller="ctrl">
  <div id="counter">{{overedCounter}}</div>
  <div id="draggable" draggable></div>
  <div id="droppable" ng-show="display" dragover="overed"></div>
</div>

问题是当draggable位于只能在拖动期间可见的dropable上时，不会触发“dragover”事件。要使事件触发，您必须拖出窗口以创建滚动条，然后触发事件。

我注意到问题是由于droppable元素对于JqueryUI（here）而言不是“可见”的，所以事件不会被触发。

你知道我如何“更新”元素以设置新的可见性吗？我应该在AngularJS项目上打开一个问题吗？

谢谢！

Answer 1

考虑使用mousedown，mousemove和mouseup事件来改变droppable可见性，draggable.directive.js的新defenition如下：

angular.module("app").directive("draggable", function($timeout){
  var directive = {
    restrict: 'A',
    link: link
  };
  return directive;

  function link(scope, element, attrs) {
    element.mousedown( function(){
      element.data("mousedown", 1);
    });

   element.mousemove(function(){
       if(element.data("mousedown") == 1){
          scope.setDisplay(true); 
          scope.$digest();
       }
    });

    element.mouseup( function(){ 
      element.removeData("mousedown");
      scope.setDisplay(false); 
      scope.$digest(); 
    }); 

   element.draggable();
  }
});

AngularJS与JqueryUI，dragover和ng-show问题

1 个答案: