jquery - 使用 AngularJS 拖放(带或不带 jQuery)，怎么样？

Question

我想做的正是this ，但那是在 jQuery 中，我想知道在 AngularJS 中是否有办法做到这一点，或者是否有人已经用 Angular 方式做到了这一点，如果没有，那么 Angular 如何允许您自定义指令来解决此类问题。

我知道使用 jQuery，但我想继续使用 AngularJS，它非常令人困惑，所以如果我的问题不够好，我很抱歉，但我发现的只是 this这根本没有帮助。我真的很感激你能就此向我提出的任何建议。

Answer 1

这是我的做法，它有点复杂，因为我包含了添加事件处理程序(启动、拖动、停止)和容器元素的功能。这是一个用于演示的工作 fiddle JSFiddle Without jQuery 。这是另一个使用 jQuery 和 jQueryUI [JSFiddle w/jQuery] 的版本。希望能帮助到你。 JSFiddle With jQuery and jQueryUI .

你可以像这样使用它

ng-draggable='dragOptions'

Controller 中的哪个位置

$scope.dragOptions = {
    start: function(e) {
      console.log("STARTING");
    },
    drag: function(e) {
      console.log("DRAGGING");
    },
    stop: function(e) {
      console.log("STOPPING");
    },
    container: 'container-id'
}

这是指令。

.directive('ngDraggable', function($document) {
  return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
      var startX, startY, x = 0, y = 0,
          start, stop, drag, container;

      var width  = elem[0].offsetWidth,
          height = elem[0].offsetHeight;

      // Obtain drag options
      if (scope.dragOptions) {
        start  = scope.dragOptions.start;
        drag   = scope.dragOptions.drag;
        stop   = scope.dragOptions.stop;
        var id = scope.dragOptions.container;
        container = document.getElementById(id).getBoundingClientRect();
      }

      // Bind mousedown event
      elem.on('mousedown', function(e) {
        e.preventDefault();
        startX = e.clientX - elem[0].offsetLeft;
        startY = e.clientY - elem[0].offsetTop;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
        if (start) start(e);
      });

      // Handle drag event
      function mousemove(e) {
        y = e.clientY - startY;
        x = e.clientX - startX;
        setPosition();
        if (drag) drag(e);
      }

      // Unbind drag events
      function mouseup(e) {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
        if (stop) stop(e);
      }

      // Move element, within container if provided
      function setPosition() {
        if (container) {
          if (x < container.left) {
            x = container.left;
          } else if (x > container.right - width) {
            x = container.right - width;
          }
          if (y < container.top) {
            y = container.top;
          } else if (y > container.bottom - height) {
            y = container.bottom - height;
          }
        }

        elem.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }
    }
  }

})