使用 AngularJS（有或没有 jQuery）拖放，如何？

Question

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

我知道要使用 jQuery，但我想继续使用 AngularJS，它非常令人困惑，所以如果我的问题不够好，我很抱歉，但我发现的只是 this，而这并不一点帮助都没有。我真的很感谢您对此提出的任何建议。

Answer 1

我是这样做的，它有点复杂，因为我包括添加事件处理程序（开始、拖动、停止）和容器元素的能力。这是演示JSFiddle Without jQuery 的工作小提琴。这是另一个使用 jQuery 和 jQueryUI [JSFiddle w/jQuery] 的版本。希望能帮助到你。 JSFiddle With jQuery and jQueryUI.

你可以这样使用它

ng-draggable='dragOptions'

你的控制器在哪里

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

})

Answer 2

很久以前，我已经围绕 jQueryUI 可拖放/可拖放创建了一个包装器。可能对你有帮助。

演示：http://codef0rmer.github.com/angular-dragdrop/#/

来源：https://github.com/codef0rmer/angular-dragdrop

Answer 3

使用 AngularJS 进行拖放的最佳示例。设计简单，步骤简单。

首先定义anguler应用程序（ng-app）名称，定义两个指令和一个控制器，如下所述。还应用一些 css 来改善 html 的外观和感觉

只需运行 sn-p 并享受编码。

var module = angular.module('my-app', []);

module.directive('draggable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element[0].addEventListener('dragstart', scope.handleDragStart, false);
      element[0].addEventListener('dragend', scope.handleDragEnd, false);
    }
  }
});

module.directive('droppable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element[0].addEventListener('drop', scope.handleDrop, false);
      element[0].addEventListener('dragover', scope.handleDragOver, false);
    }
  }
});

function MainController($scope)
{
    $scope.drag_types = [
        {name: "Charan"},
        {name: "Vijay"},
        {name: "Mahesh"},
      {name: "Dhananjay"},
    ];
    $scope.items = [];
    
    $scope.handleDragStart = function(e){
        this.style.opacity = '0.4';
        e.dataTransfer.setData('text/plain', this.innerHTML);
    };
    
    $scope.handleDragEnd = function(e){
        this.style.opacity = '1.0';
    };
    
    $scope.handleDrop = function(e){
        e.preventDefault();
        e.stopPropagation();
        var dataText = e.dataTransfer.getData('text/plain');
        $scope.$apply(function() {
            $scope.items.push(dataText);
        });
        console.log($scope.items);
    };
    
    $scope.handleDragOver = function (e) {
        e.preventDefault(); // Necessary. Allows us to drop.
        e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
        return false;
  };
           
}

.container {
  width: 600px;
  border: 1px solid #CCC;
  box-shadow: 0 1px 5px #CCC;
  border-radius: 5px;
  font-family: verdana;
  margin: 25px auto;
}

.container header {
  background: #f1f1f1;
  background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
  background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
  background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
  background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
  box-shadow: 0 1px 2px #888;
  padding: 10px;
}

.container h1 {
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  text-shadow: 0 1px 2px white;
  color: #888;
  text-align: center;
}

.container section {
  padding: 10px 30px; 
  font-size: 12px;
  line-height: 175%;
  color: #333;
}

<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<div ng-app="my-app" ng-controller="MainController">
    <div class="container">
        <header><h1>Drag students from here</h1></header>
        <section>
            <div draggable="true" ng-repeat="drag_type in drag_types">{{drag_type.name}}</div>
        </section>
    </div>
    <div class="container">
        <header><h1>Drop students here</h1></header>
        <section droppable="true">
            <div><span>You dragged in: </span>
                <span ng-repeat="name in items track by $index">
                    <span ng-show="$index != 0">,</span>
                    {{name}}
                </span>
            </div>
        </section>
    </div>
    
     See the JSON: <pre>{{items|json}}</pre>
</div>