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

jopen 8年前發布 | 174K 次閱讀 Web框架 angular-drag angularjs

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 依賴 angular 與 jquery 兩個全局模塊

指令

  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

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！