{"id":24869407,"url":"https://github.com/rosejoe47/angular-mixed-cdk-drag-drop","last_synced_at":"2025-07-09T23:32:25.156Z","repository":{"id":64534362,"uuid":"576117028","full_name":"rosejoe47/angular-mixed-cdk-drag-drop","owner":"rosejoe47","description":"angular-mixed-cdk-drag-drop is an Angular Directive to support mixed orientation drag drop using angular cdk.","archived":false,"fork":false,"pushed_at":"2025-05-07T16:07:24.000Z","size":954,"stargazers_count":32,"open_issues_count":2,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-10T07:43:56.108Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/rosejoe47.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-09T03:32:21.000Z","updated_at":"2025-05-07T17:18:32.000Z","dependencies_parsed_at":"2024-01-09T04:43:57.265Z","dependency_job_id":"ae30169f-1dd1-4d72-aac2-77b591ce1635","html_url":"https://github.com/rosejoe47/angular-mixed-cdk-drag-drop","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"56e0d3187ea1a87ffca82b507456dd1e844cde95"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/rosejoe47/angular-mixed-cdk-drag-drop","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosejoe47%2Fangular-mixed-cdk-drag-drop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosejoe47%2Fangular-mixed-cdk-drag-drop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosejoe47%2Fangular-mixed-cdk-drag-drop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosejoe47%2Fangular-mixed-cdk-drag-drop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rosejoe47","download_url":"https://codeload.github.com/rosejoe47/angular-mixed-cdk-drag-drop/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rosejoe47%2Fangular-mixed-cdk-drag-drop/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264505232,"owners_count":23618906,"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":[],"created_at":"2025-02-01T03:22:59.878Z","updated_at":"2025-07-09T23:32:25.146Z","avatar_url":"https://github.com/rosejoe47.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Drag and Drop"],"readme":"# AngularMixedCdkDragDrop\n\nangular-mixed-cdk-drag-drop is an Angular `Directive` to support mixed orientation drag drop using angular cdk.\n\nSupport Standalone Component and Module.\n\n## Demo\n\n![h_demo](https://github.com/rosejoe47/angular-cdk-mixed-drag-drop/blob/v1/s_h_demo.gif)\n![v_demo](https://github.com/rosejoe47/angular-cdk-mixed-drag-drop/blob/v1/s_v_demo.gif)\n\n## Installation\n\n```cmd\nnpm install angular-mixed-cdk-drag-drop\n```\n\n## Versions\n* for angular 19 use v^2.4.0 / angular19\n```cmd\nnpm install angular-mixed-cdk-drag-drop@angular19\n```\n\n* for angular 18 use v^2.2.4 / angular18\n```cmd\nnpm install angular-mixed-cdk-drag-drop@angular18\n```\n\n* for angular 17 use v^2.2.3 / angular17\n```cmd\nnpm install angular-mixed-cdk-drag-drop@angular17\n```\n* for angular 16 use v^2.1.0 / angular16\n```cmd\nnpm install angular-mixed-cdk-drag-drop@angular16\n```\n* for angular 15 use v^2.0.0 / angular15\n```cmd\nnpm install angular-mixed-cdk-drag-drop@angular15\n```\n* for angular 14 use angular14\n```cmd\nnpm install angular-mixed-cdk-drag-drop@angular14\n```\n\n## Usage\n\nThe official cdkDropList is implement like below.\n\n```html\n\u003cdiv cdkDropList cdkDropListOrientation=\"horizontal\" class=\"example-list\" (cdkDropListDropped)=\"drop($event)\"\u003e\n  \u003cdiv class=\"example-box\" *ngFor=\"let item of items\" cdkDrag\u003e{{item}}\u003c/div\u003e\n\u003c/div\u003e\n```\n\nTo use this mixed orientation directive, we need to put every cdkDrag in an individual cdkDropList and grouped all the dropList in a CdkDropListGroup.\nTo do so with the following few steps.\n\n1. change the original CdkDropList to CdkDropListGroup, applied `mixedCdkDragDrop` directive and set orientation(required). (the list group need to be a Flex container which set the style display property to flex.)\n2. add additional cdkDropList with `mixedCdkDropList` directive as the parent of every cdkDrag.\n3. you can now be happy to enjoy the mixed cdk drag drop.\n\n```html\n\u003cdiv class=\"example-list\"\n     cdkDropListGroup mixedCdkDragDrop\n     [orientation]=\"'horizontal'\"\n     [itemList]=\"items\"\n     (dropped)=\"dropped($event)\"\u003e\n      @for (item of items; track item.id) {\n        \u003cspan cdkDropList mixedCdkDropList\u003e\n          \u003cdiv class=\"example-box\" cdkDrag\u003e\n                {{item}}\n                \u003cdiv cdkDragHandle\u003e = \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/span\u003e\n     }\n\u003c/div\u003e\n```\n\n### mixedCdkDragSizeHelper\n\nWhen cdkDrag size is originally depend on its container. Applied mixedCdkDragDrop will break the style by adding additional cdkDropList parent element.\nMixedCdkDragSizeHelper directive will help to handle the CdkDrag size in this case.\n1. Applied mixedCdkDragSizeHelper to cdkDrag.\n2. ContentBoxSize emitter is required. (default Emitter MixedCdkDragSizeHelperDirective.defaultEmitter is provided.)\n3. Set containerSelector in mixedCdkDragDrop if needed. (default value is mixedCdkDragDrop.)\n\n\n```html\n\u003cdiv class=\"example-list\"\n     cdkDropListGroup mixedCdkDragDrop\n     [containerSelector]=\"'.example-list'\"\u003e\n      @for (item of items; track item.id) {\n        \u003cspan cdkDropList mixedCdkDropList\u003e\n          \u003cdiv class=\"example-box\" cdkDrag mixedCdkDragSizeHelper\n               (contentBoxSize)=\"onSizeChange($event)\"\u003e\n                {{item}}\n                \u003cdiv cdkDragHandle\u003e = \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/span\u003e\n     }\n\u003c/div\u003e\n```\n\n```typescript\nonSizeChange(event: MixedCdkDragContainerSize) {\n  MixedCdkDragSizeHelperDirective.defaultEmitter(event, Number(this.percentWidth), Number(this.percentHeight));\n}\n```\n\n## Global settings\n\nYou can use MixedCdkDragDropModule.forRoot to define global settings:\n\n```typescript\nMixedCdkDragDropModule.forRoot({ autoScrollStep: 4 });\n```\n\n## Publish\n```cmd\n# 1. 確保您在專案根目錄\ncd /path/to/your/project\n\n# 2. 構建庫\nng build angular-mixed-cdk-drag-drop\n\n# 3. 切換到構建輸出目錄\ncd dist/angular-mixed-cdk-drag-drop\n\n# 4. 檢查 package.json 是否正確\ncat package.json\n\n# 5. 發布\nnpm publish\n```\n\n\n## License\n\n```text\nCopyright 2025 Rose Chung\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frosejoe47%2Fangular-mixed-cdk-drag-drop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frosejoe47%2Fangular-mixed-cdk-drag-drop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frosejoe47%2Fangular-mixed-cdk-drag-drop/lists"}