使用AngularJS（带或不带jQuery）拖放，如何操作？

我想做的正是，但这是在jQuery中，我想知道在AngularJS中是否有这样做的方法，或者是否有人已经用AngularJS做过，如果没有，它如何支持AngularJS，允许您自定义指令来解决这类问题

---

我知道使用jQuery，但我想继续讨论AngularJS，它非常混乱，所以如果我的问题不够好，我很抱歉，但我所发现的是，这一点都没有帮助。我真的很感激你能给我的任何建议。

以下是我是如何做到的，它有点复杂，因为我包括了添加事件处理程序（启动、拖动、停止）和容器元素的功能。这是一把用于演示的小提琴。下面是另一个使用jQuery和jQueryUI[JSFIDLE w/jQuery]的版本。希望能有帮助

你可以这样使用它

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

})

指令（'ngDraggable'，函数（$document）{ 返回{ 限制：“A”， 范围：{ dragOptions:'=NGDRAGABLE' }, 链接：功能（范围、要素、属性）{ 变量startX，startY，x=0，y=0， 启动、停止、拖动、容器； 变量宽度=元素[0]。偏移网络宽度， 高度=元素[0]。视线外； //获取拖动选项 if（范围dragOptions）{ 开始=scope.dragOptions.start； 拖动=scope.dragOptions.drag； 停止=scope.dragOptions.stop； var id=scope.dragOptions.container； container=document.getElementById（id）.getBoundingClientRect（）； } //绑定鼠标向下事件 元素on（'mousedown'，函数（e）{ e、 预防默认值（）； startX=e.clientX-elem[0].offsetLeft； startY=e.clientY-elem[0]。offsetTop； $document.on（'mousemove'，mousemove）； $document.on（'mouseup'，mouseup）； 如果（启动）启动（e）； }); //句柄拖动事件 函数mousemove（e）{ y=e.clientY-startY； x=e.clientX-startX； 设置位置（）； 如果（拖动）拖动（e）； } //解除绑定拖动事件 功能鼠标（e）{ $document.unbind（'mousemove'，mousemove）； $document.unbind（'mouseup'，mouseup）； 如果（停止）停止（e）； } //在容器内移动元素（如果提供） 函数setPosition（）{ if（集装箱）{ if（x<容器左）{ x=容器。左； }else if（x>container.right-宽度）{ x=容器。右-宽度； } 如果（y<容器顶部）{ y=容器顶部； }否则，如果（y>容器底部-高度）{ y=容器底部-高度； } } 元素css({ 顶部：y+‘px’， 左：x+‘px’ }); } } } })

---

很久以前，我就在jQueryUI Dragable/Dropable周围创建了一个包装器。可能对你有帮助

演示：

---

来源：

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

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

只需运行代码片段并享受编码过程

var module=angular.module（'my-app'，[]）；
module.directive（'draggable'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素[0]。addEventListener（'dragstart'，scope.handleDragStart，false）；
元素[0]。addEventListener（'dragend'，scope.handleDragEnd，false）；
}
}
});
module.directive（'droppable'，function（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素[0]。addEventListener（'drop'，scope.handleDrop，false）；
元素[0]。addEventListener（'dragover'，scope.handleDragOver，false）；
}
}
});
功能主控制器（$scope）
{
$scope.drag\u类型=[
{name:“Charan”}，
{名称：“Vijay”}，
{姓名：“Mahesh”}，
{名称：“达南杰”}，
];
$scope.items=[]；
$scope.handleDragStart=函数（e）{
this.style.opacity='0.4'；
e、 dataTransfer.setData（'text/plain'，this.innerHTML）；
};
$scope.handleDragEnd=函数（e）{
this.style.opacity='1.0'；
};
$scope.handleDrop=函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
var dataText=e.dataTransfer.getData（'text/plain'）；
$scope.$apply（函数（）{
$scope.items.push（数据文本）；
});
log（$scope.items）；
};
$scope.handleDragOver=函数（e）{
e、 preventDefault（）；//必要。允许我们删除。
e、 dataTransfer.dropEffect='move'；//请参阅有关dataTransfer对象的部分。
返回false；
};
}

.container{
宽度：600px；
边框：1px实心#CCC；
盒影：0 1px 5px#CCC；
边界半径：5px；
字体系列：verdana；
保证金：25像素自动；
}
.货柜头{
背景#f1f1；
背景图像：-webkit线性渐变（顶部，#f1f1，#CCC）；
背景图像：-ms线性梯度（顶部，#f1f1，#CCC）；
背景图像：-莫兹线性梯度（顶部，#f1f1，#CCC）；
背景图像：-o-线性梯度（顶部，#f1f1，#CCC）；
盒影：0 1px 2px#888；
填充：10px；
}
.集装箱h1{
填充：0；
保证金：0；
字体大小：16px；
字体大小：正常；
文本阴影：0 1px 2px白色；
颜色：#888；
文本对齐：居中；
}
.货柜组{
填充：10px 30px；
字体大小：12px；
线高：175%；
颜色：#333；
}

把学生从这里拖走
{{drag_type.name}
让学生在这里下车
你拖进来了：
,
{{name}}