javascript - AngularJS的基本可拖动？

Question

我不想要可拖动的可排序元素或任何花哨的东西，只是一个可拖动的元素，就像一个普通的 jQuery div 可拖动对象：

$("#draggable").draggable();

通过Angular做到这一点的正确方法是什么？我仍然使用 jQueryUI，还是在 AngularUI 中有什么可以使用的？我查看了这两个 Angular 库，但没有找到任何专门针对可拖动对象的内容。

Answer 1

使用指令。

例子：

angular.module("myApp").directive('andyDraggable', function() {
  return {
    restrict: 'A',
    link: function(scope, elm, attrs) {
      var options = scope.$eval(attrs.andyDraggable); //allow options to be passed in
      elm.draggable(options);
    }
  };
});

HTML

<div andy-draggable>Drag me!</div>
<div andy-draggable="{key: value}">Drag me with options!</div>

指令文档： http: //docs.angularjs.org/guide/directive

您还可以在拖动、连接事件等期间为元素的当前位置创建数据绑定。但这是一个非常基本的版本。