基本可以与AngularJS一起使用?

Org*_*cat 24 javascript jquery angularjs

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

$("#draggable").draggable();
Run Code Online (Sandbox Code Playgroud)

通过Angular执行此操作的正确方法是什么?我仍然使用jQueryUI,或者我可以使用AngularUI中的任何内容吗?我查看了两个Angular库,但没有找到任何专门处理可拖动对象的内容.

And*_*lin 39

使用指令.

例:

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);
    }
  };
});
Run Code Online (Sandbox Code Playgroud)

HTML

<div andy-draggable>Drag me!</div>
<div andy-draggable="{key: value}">Drag me with options!</div>
Run Code Online (Sandbox Code Playgroud)

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

您还可以在拖动,挂钩事件等过程中为元素的当前位置创建数据绑定.但这是一个非常基本的版本.

  • 无需在jQuery中包装`elm`.它已经*是一个jQuery对象.Angular预先包装jQuery中的所有元素(如果它可用.否则它使用自己的jqLit​​e). (8认同)
  • +1表示如何使用指令的一个很好的,简单的语义示例.您应该编辑您的示例以从`elm`删除jQuery包装器,因为@JosephSilber指出=>`elm.draggable(options);` (2认同)