{"id":21433200,"url":"https://github.com/cdwv/ui-grid-draggable-rows","last_synced_at":"2025-04-30T21:36:15.023Z","repository":{"id":32357570,"uuid":"35933447","full_name":"cdwv/ui-grid-draggable-rows","owner":"cdwv","description":"HTML5 Drag and Drop functionality for angular ui-grid","archived":false,"fork":false,"pushed_at":"2020-02-11T14:11:18.000Z","size":51,"stargazers_count":70,"open_issues_count":23,"forks_count":32,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-01-17T05:06:37.164Z","etag":null,"topics":["angular","drag-and-drop","ui-grid"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cdwv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-20T07:41:19.000Z","updated_at":"2024-07-17T12:35:38.000Z","dependencies_parsed_at":"2022-09-07T13:01:14.907Z","dependency_job_id":null,"html_url":"https://github.com/cdwv/ui-grid-draggable-rows","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdwv%2Fui-grid-draggable-rows","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdwv%2Fui-grid-draggable-rows/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdwv%2Fui-grid-draggable-rows/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdwv%2Fui-grid-draggable-rows/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdwv","download_url":"https://codeload.github.com/cdwv/ui-grid-draggable-rows/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235448546,"owners_count":18991894,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","drag-and-drop","ui-grid"],"created_at":"2024-11-22T23:26:34.414Z","updated_at":"2025-01-24T14:12:43.574Z","avatar_url":"https://github.com/cdwv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Draggable rows plugin for ui-grid\n=================================\n\n![NPM](https://img.shields.io/npm/v/ui-grid-draggable-rows.svg)\n![Bower](https://img.shields.io/bower/v/ui-grid-draggable-rows.svg)\n![License](https://img.shields.io/npm/l/ui-grid-draggable-rows.svg)\n\nPlay with HTML5 _drag and drop_ in angular ui-grid.\n\n![Preview](http://i.imgur.com/1Zmi1B6.gif)\n\n\u003e Checkout our codepen collection https://codepen.io/collection/AMpZgd/\n\n## Install\nInstall using npm\n\n```sh\nnpm install ui-grid-draggable-rows\n```\n\nInstall using bower\n\n```sh\nbower install ui-grid-draggable-rows\n```\n\nAdd plugin as dependency to your module\n\n```js\nangular.module(\"app\", [\"ui.grid\", \"ui.grid.draggable-rows\"]);\n```\n\n## Usage\nTo add _drag and drop_ functionality you have to insert `ui-grid-draggable-rows` directive to your table.\n\n```html\n\u003cdiv ui-grid=\"gridOptions\" class=\"grid\" ui-grid-draggable-rows\u003e\u003c/div\u003e\n```\n\nNow, you have to add draggable wrapper to your `rowTemplate`. If you have your own template just replace the inner div.\n\n```html\n$scope.gridOptions = {\n    rowTemplate: '\u003cdiv grid=\"grid\" class=\"ui-grid-draggable-row\" draggable=\"true\"\u003e\u003cdiv ng-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\u003e\u003c/div\u003e\u003c/div\u003e'\n};\n```\n\n\nTo add action after dropping row register new listener on `rowDropped` event.\n\n```js\n$scope.gridOptions.onRegisterApi = function (gridApi) {\n    gridApi.draggableRows.on.rowDropped($scope, function (info, dropTarget) {\n        console.log(\"Dropped\", info);\n    });\n};\n```\n\nTo enable using a \"handle\" for dragging the rows, add the `useUiGridDraggableRowsHandle` property to your gridOptions and add this class to your handle: `ui-grid-draggable-row-handle`.\n\n```js\n$scope.gridOptions.useUiGridDraggableRowsHandle = true;\n```\n\n## Additional styling\nWhen you drag a row over others they get additional css class `ui-grid-draggable-row-over`. This plugin has default styling for these elements. If you are using __less__ you could import styles into your application.\n\n```css\n@import \"/path/to/bower_components/ui-grid-draggable-rows/less/draggable-rows\";\n```\n\nIf you are using clear css just put these styles into your stylesheet.\n\n```css\n.ui-grid-draggable-row-target {\n  opacity: 0.5 !important;\n}\n.ui-grid-draggable-row {\n  height: 30px;\n}\n.ui-grid-draggable-row-over {\n  position: relative;\n}\n.ui-grid-draggable-row-over:before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  border-bottom: 1px dotted #AAA;\n}\n.ui-grid-draggable-row-over--above:before {\n  top: 0;\n}\n.ui-grid-draggable-row-over--below:before {\n  bottom: 0;\n}\n```\n\n## List of events\n\n| Event         | Listener                               | Original event   | Description                                 |\n|---------------|----------------------------------------|------------------|---------------------------------------------|\n| rowDragged    | function(info, rowElement)             | onDragStart      | Fired once during start dragging            |\n| rowEnterRow   | function(info, rowElement)             | onDragEnter      | Fired when draggable row enter on other row |\n| rowOverRow    | function(info, rowElement)             | onDragOver       | Fired when draggable row is over other row  |\n| rowLeavesRow  | function(info, rowElement)             | onDragLeave      | Fired when draggable row leaves other row   |\n| rowFinishDrag | function()                             | onDragEnd        | Fired after finish dragging                 |\n| beforeRowMove | function(from, to, data)               |                  | Fired before a row's index is changed       |\n| rowDropped    | function(info, targetElement)          | onDrop           | Fired when row is dropping to other row     |\n\nTo listen these events just register new listener via _ui-grid_ API.\n\n`info` is an object with the following properties\n```js\n{\n    draggedRow: domElement,     // The dragged row element\n\n    draggedRowEntity: object,   // The object the dragged row represents in the grid data (`row.entity`)\n\n    targetRow: domElement,      // The target row element\n\n    targetRowEntity: object,    // The object the target row represents in the grid data\n\n    position: string,           // String that indicates whether the row was dropped\n                                // above or below the drop target (determined by half row height)\n                                // eg. 'above' or 'below'\n\n    fromIndex: int,             // Original position of dragged row in sequence\n\n    toIndex: int,               // New position of dragged row in the sequence\n}\n```\n\n```js\n$scope.gridData.onRegisterApi = function (gridApi) {\n    gridApi.draggableRows.on.rowDragged($scope, function (info, rowElement) {\n        console.log(\"Start dragging...\");\n\n        // do something\n    });\n};\n```\n\n## Public methods\n\n| Method                      | Description                                       |\n|-----------------------------|---------------------------------------------------|\n| setDragDisabled(boolean)    | Enable or disable drag 'n drop functionality      |\n\n\nAll public methods are accessible through `dragndrop` object from `gridApi`. See example below\n\n```js\n$scope.gridData.onRegisterApi = function (gridApi) {\n    gridApi.dragndrop.setDragDisabled($scope.enabled);\n};\n```\n\n## Handling grouping\nIn order to handle grouping you have to manually set the 'from' grouping value to that of the 'to' as shown below.\n\n```js\n$scope.gridData.onRegisterApi = function (gridApi) {\n    gridApi.draggableRows.on.beforeRowMove($scope, function (from, to, data) {\n        console.log(\"Setting the grouping values\");\n        data[from].groupValue = data[to].groupValue;\n    });\n};\n```\n\n## Todo\n- [ ] automatically insert the required template row\n- [ ] write test _(better late than never)_\n- [ ] improve documentation\n\n## Support\n\n[\u003cimg width=\"300\" title=\"Codewave.eu\" src=\"https://codewave.eu/image/250x180/b1afbd61-e8bf-11e8-8855-669b46138f27.svg\"\u003e](http://codewave.eu)\n\nProject is currently maintained by [codewave.eu](http://codewave.eu).\n\n## Author\nPlugin **ui-grid-draggable-rows** has been originally developed by [Szymon Krajewski](https://github.com/skrajewski).\n\n## License\nThe MIT License \u0026copy; 2015 - 2016\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdwv%2Fui-grid-draggable-rows","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdwv%2Fui-grid-draggable-rows","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdwv%2Fui-grid-draggable-rows/lists"}