使用AngularJS(带有或不带有jQuery)进行拖放，该如何做? [英] Drag and Drop using AngularJS (with or without jQuery), how?

问题描述

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

what i want to do is exactly this , but that is in jQuery and i want to know if is there a way to do that in AngularJS, or if someone has alredy done it with the Angular way, and if not, how it suppouse that Angular allows you to customize directives to solve this kind of problems.

我知道要使用jQuery，但我想继续使用AngularJS及其它非常令人困惑的功能，所以对不起，如果我的问题不够好，但是我发现的全部是

I know to use jQuery but i want to move on into AngularJS and its very confusing, so i'm sorry if my question isn't good enough, but all what i've found is this and that doesn't help at all. I'd really apreciate any advice you can say me about this.

推荐答案

这是我的工作方式，它稍微复杂一点，因为我包括添加事件处理程序(开始，拖动，停止)的功能，并且容器元素.这是用于演示没有jQuery的JSFiddle 的有用的小提琴.这是另一个使用jQuery和jQueryUI [JSFiddle w/jQuery]版本的小提琴.希望能帮助到你.使用jQuery和jQueryUI的JSFiddle .

Here is how I did it, it is a little more complicated, since I included the ability to add event handlers (start, drag, stop), and a container element. Here is a working fiddle for demonstration JSFiddle Without jQuery. Here is another fiddle with a version using jQuery and jQueryUI [JSFiddle w/ jQuery]. Hope it helps. JSFiddle With jQuery and jQueryUI.

您可以像这样使用它

ng-draggable='dragOptions'

您在控制器中的哪个位置

where in your controller you have

$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'
        });
      }
    }
  }

})

这篇关于使用AngularJS(带有或不带有jQuery)进行拖放，该如何做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！