AngularJS的基本可拖动？答案

【问题标题】：Basic draggable with AngularJS?AngularJS的基本可拖动？
【发布时间】：2013-01-29 18:16:01
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery angularjs

【解决方案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

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

【讨论】：

无需在 jQuery 中包装 elm。它已经是一个 jQuery 对象。 Angular 预先包装 jQuery 中的所有元素（如果可用。否则它使用自己的 jqLite）。
尝试了，但没有成功。没有错误，但它不会使元素可拖动。我通过定义一个 id （临时）并添加可拖动对象来仔细检查 jQueryUI 是否正常工作。我必须添加 jQuery 库吗？它们目前在我的页面末尾定义。有角度的位于顶部（包括控制器/指令）。
你应该在 Angular 之前包含 jQuery ......尽管这不应该特别搞砸这一点。您确定该指令正在运行吗？您是否包括定义指令的文件？
我之前和之后都试过jQuery，没有效果。我实际上并不确定该指令是否正在运行，因为我抛出了一个警报和 console.log 并且没有发生任何事情。我确信该文件已包含在内，因为我有一个函数正在其中执行一些其他操作（在那部分之后）。我已经把它剥离了，但仍然没有得到任何东西。可能缺少 '}' 或 ';'我猜在什么地方？这是 sn-p：jsfiddle.net/fwHcW
+1 是一个关于如何使用指令的漂亮、简单、语义化的示例。您应该编辑您的示例以从 elm 中删除 jQuery 包装器，正如 @JosephSilber 指出的那样 => elm.draggable(options);