原文地址:http://www.open-open.com/lib/view/open1452255462401.html
angular-drag
基於 AngularJS 的拖拽指令
- 支持 GPU 加速
- 支持邊界限制
- 支持設置拖拽把柄
- 移動端與 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 依賴
angular
與jquery
兩個全局模塊
指令
drag
被拖拽的元素drag-handle
觸發拖拽的把柄(可選)
示例
- 簡單的可拖拽元素
<div drag class="example">
hello world
</div>
- 自定義拖拽的把柄
<div drag class="example">
<div drag-handle></div>
<p>hello world</p>
</div>
在線演示:https://aui.github.io/angular-drag/example/index.html