Javascript AngularJS 的基本可拖动?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14589516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 17:18:26  来源:igfitidea点击:

Basic draggable with AngularJS?

javascriptjqueryangularjs

提问by Organiccat

I don't want draggable sortable elements or anything fancy, just a draggable element, like a normal jQuery div draggable object:

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

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

What is the proper way to do this through Angular? Do I still use jQueryUI, or is there anything in AngularUI I can use? I looked through both Angular libraries but didn't find anything specifically addressing draggable objects.

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

回答by Andrew Joslin

Use a directive.

使用指令。

Example:

例子:

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

HTML

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

Documentation on directives: http://docs.angularjs.org/guide/directive

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

You could also create data-binding for the element's current position during the drag, hook up events, etc. But this is a really basic version.

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