ui-grid-draggable-rows, Angular 用户界面网格的HTML5拖放功能

分享于 

7分钟阅读

GitHub

  繁體 雙語
HTML5 Drag and Drop functionality for angular ui-grid
  • 源代码名称:ui-grid-draggable-rows
  • 源代码网址:http://www.github.com/cdwv/ui-grid-draggable-rows
  • ui-grid-draggable-rows源代码文档
  • ui-grid-draggable-rows源代码下载
  • Git URL:
    git://www.github.com/cdwv/ui-grid-draggable-rows.git
    Git Clone代码到本地:
    git clone http://www.github.com/cdwv/ui-grid-draggable-rows
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/cdwv/ui-grid-draggable-rows
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    可以拖动的行网格插件插件

    NPMBowerLicense

    在 Angular ui网格中使用 HTML5 拖放。

    Preview

    检查我们的codepen集合 http://codepen.io/collection/nmykqV/

    安装

    使用npm安装

    npm install ui-grid-draggable-rows

    使用 Bower 安装

    bower install ui-grid-draggable-rows

    将插件添加为你的模块

    angular.module("app", ["ui.grid", "ui.grid.draggable-rows"]);

    用法

    要添加拖放功能,你必须将 ui-grid-draggable-rows 指令插入到你的。

    <divui-grid="gridOptions"class="grid"ui-grid-draggable-rows></div>

    现在,你必须向你的rowTemplate 添加可以拖拽的包装器。 如果你拥有自己的模板,只需替换内部。

    $scope.gridOptions = {
     rowTemplate: '<divgrid="grid"class="ui-grid-draggable-row"draggable="true"><divng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"class="ui-grid-cell"ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader, 'custom': true }"ui-grid-cell></div></div>'
    };

    rowDropped 事件中删除行 register 新侦听器后添加操作。

    $scope.gridOptions.onRegisterApi=function (gridApi) {
     gridApi.draggableRows.on.rowDropped($scope, function (info, dropTarget) {
     console.log("Dropped", info);
     });
    };

    要启用使用"句柄"拖动行,请将 useUiGridDraggableRowsHandle 属性添加到gridOptions中,并将此类添加到你的句柄中: ui-grid-draggable-row-handle

    $scope.gridOptions.useUiGridDraggableRowsHandle=true;

    附加样式

    当你拖动一行的时候,他们会得到额外的css类 ui-grid-draggable-row-over。 这里插件具有这些元素的默认样式。 如果你使用的你可以将样式导入你的应用程序中。

    @import"/path/to/bower_components/ui-grid-draggable-rows/less/draggable-rows";

    如果你使用的是清晰的css,把这些样式放入你的样式表中。

    .ui-grid-draggable-row-target {
     opacity: 0.5!important;
    }.ui-grid-draggable-row {
     height: 30px;
    }.ui-grid-draggable-row-over {
     position: relative;
    }.ui-grid-draggable-row-over:before {
     content: "";
     display: block;
     position: absolute;
     left: 0;
     width: 100%;
     border-bottom: 1pxdotted#AAA;
    }.ui-grid-draggable-row-over--上面:before {
     top: 0;
    }.ui-grid-draggable-row-over--below:before {
     bottom: 0;
    }

    下拉事件列表

    事件侦听器原始事件描述
    rowDragged函数( 信息,rowElement )onDragStart在开始拖动期间激发一次
    rowEnterRow函数( 信息,rowElement )onDragEnter当可以拖动行在其他行中输入时激发
    rowOverRow函数( 信息,rowElement )onDragOver当可以拖动行位于其他行上方时激发
    rowLeavesRow函数( 信息,rowElement )onDragLeave当可以拖动行离开其他行时激发
    rowFinishDrag函数( )onDragEnd完成拖动后激发
    beforeRowMove函数( 来自。到。数据)在更改行的索引之前触发
    rowDropped函数( 信息,targetElement )onDrop当行下降到其他行时激发

    只需通过ui网格 API侦听这些事件。

    info 是具有下列属性的对象

    {
     draggedRow: domElement, // The dragged row element draggedRowEntity: object, // The object the dragged row represents in the grid data (`row.entity`) targetRow: domElement, // The target row element targetRowEntity: object, // The object the target row represents in the grid data position: string, // String that indicates whether the row was dropped// 上面 or below the drop target (determined by half row height)// eg. '上面' or 'below' fromIndex: int, // Original position of dragged row in sequence toIndex: int, // New position of dragged row in the sequence}
    $scope.gridData.onRegisterApi=function (gridApi) {
     gridApi.draggableRows.on.rowDragged($scope, function (info, rowElement) {
     console.log("Start dragging...");
     // do something });
    };

    public-方法

    方法说明
    setDragDisabled ( 布尔)启用或者禁用拖放功能

    所有 public 方法都可以通过 gridApi 中的dragndrop 对象访问。 请参阅示例 below

    $scope.gridData.onRegisterApi=function (gridApi) {
     gridApi.dragndrop.setDragDisabled($scope.enabled);
    };

    处理分组

    为了处理分组,必须手动将'来自'分组值设置为'到',如 below 所示。

    $scope.gridData.onRegisterApi=function (gridApi) {
     gridApi.draggableRows.on.beforeRowMove($scope, function (from, to, data) {
     console.log("Setting the grouping values");
     data[from].groupValue= data[to].groupValue;
     });
    };

    待办事项

    • 自动插入所需模板行
    • 编写测试 ( 比从未 better )
    • 改进文档

    支持

    项目目前由 codewave.eu 维护。

    作者

    插件 ui-grid-draggable-rows 最初是由 Szymon Krajewski 开发的。

    许可证

    麻省理工学院许可证 © 2015 - 2016


    angular  FUNC  函数  Html5  GRID  拖动  
    相关文章