angular-drag - 基于Angularjs的拖拽指令

angular-drag   2016-01-08 20:18:05 发布
您的评价:
     
0.0
收藏     0收藏
文件夹
标签
(多个标签用逗号分隔)

angular-drag

基于 AngularJS 的拖拽指令

  1. 支持 GPU 加速
  2. 支持边界限制
  3. 支持设置拖拽把柄
  4. 移动端与 PC 端通用

使用

支持使用 script 标签或者 webpack、requirejs、seajs 调用:

script

调用

<script src="lib/angular.js"></script>
<script src="dist/angular-drag.js"></script>
<script>
    var app = angular.module('app', ['angular-drag']);
</script>

webpack

安装

npm install angular-drag

调用

require('angular-drag');
var app = angular.module('app', ['angular-drag']);

angular-drag 依赖 angularjquery 两个全局模块

指令

  1. drag 被拖拽的元素
  2. drag-handle 触发拖拽的把柄(可选)

示例

  1. 简单的可拖拽元素
<div drag class="example">
    hello world
</div>
  1. 自定义拖拽的把柄
<div drag class="example">
    <div drag-handle></div>
    <p>hello world</p>
</div>

在线演示:https://aui.github.io/angular-drag/example/index.html

许可

MIT

项目地址: https://github.com/aui/angular-drag

扩展阅读

基于Angularjs的浮层组件:angular-popups
AngularJS 文件上传工具:angular-file-upload
HTML5,7个移动开发框架
7个混合式移动开发框架
JavaScript库,资源和实用内容的集合

为您推荐

使用jQuery和CSS3制作的响应式水平时间轴
CSS选择器
基于jQuery的一个简单的图片查看器
前端代码指南
选择一个 Python Web 框架:Django vs Flask vs Pyramid

更多

angular-drag
AngularJS
相关文档  — 更多
相关经验  — 更多
相关讨论  — 更多