{"id":15649463,"url":"https://github.com/alehatsman/ng1-html5-dnd","last_synced_at":"2026-05-19T06:05:20.598Z","repository":{"id":73441076,"uuid":"96458175","full_name":"alehatsman/ng1-html5-dnd","owner":"alehatsman","description":"An Angular 1 tiny wrapper over native html5 drag and drop functionality.","archived":false,"fork":false,"pushed_at":"2017-07-07T13:06:03.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-08T00:50:06.540Z","etag":null,"topics":["angular","dnd","javascript"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alehatsman.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":"2017-07-06T18:01:33.000Z","updated_at":"2017-07-07T12:34:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"eb672030-02eb-4576-87c9-54bcd10637fc","html_url":"https://github.com/alehatsman/ng1-html5-dnd","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/alehatsman/ng1-html5-dnd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alehatsman%2Fng1-html5-dnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alehatsman%2Fng1-html5-dnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alehatsman%2Fng1-html5-dnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alehatsman%2Fng1-html5-dnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alehatsman","download_url":"https://codeload.github.com/alehatsman/ng1-html5-dnd/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alehatsman%2Fng1-html5-dnd/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33204089,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"online","status_checked_at":"2026-05-19T02:00:06.763Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","dnd","javascript"],"created_at":"2024-10-03T12:29:49.998Z","updated_at":"2026-05-19T06:05:20.565Z","avatar_url":"https://github.com/alehatsman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng1-html5-dnd\n\nAn Angular 1 tiny wrapper over native html5 drag and drop functionality.\n\n## Installation\n\n```bash\nnpm i --save ng1-html5-dnd\n```\n\n## Usage\n\nThen in application with import support.\n\n```javascript\nimport angular from 'angular';\nimport 'ng1-html5-dnd';\n\nangular\n  .module('app-module-name', ['ng1-html5-dnd'])\n  .component('AppComponent', {\n    template: `\n      \u003cdiv ng-draggable\n           allow-drag=\"ctrl.allowDrag\"\n           on-drag-start=\"ctrl.onDragStart\"\n           on-drag=\"ctrl.onDrag\"\n           on-drag-end=\"ctrl.onDragEnd\"\n           dragEffect=\"'copy'\"\n      \u003e\n        Draggable div\n      \u003c/div\u003e\n\n      \u003cdiv ng-droppable\n           allow-drop=\"ctrl.allowDrop\"\n           on-drag-enter=\"ctrl.onDragEnter\"\n           on-drag-over=\"ctrl.onDragOver\"\n           on-drop=\"ctrl.onDrop\"\n      \u003e\n        Droppable zone\n      \u003c/div\u003e\n    `,\n    controller: AppController,\n  });\n\nfunction AppController() {\n  const ctrl = this;\n\n  ctrl.allowDrag = function() {\n    return true; \n  };\n\n  ctrl.onDragStart = function(e) {\n    console.log('onDragStart', e);\n  };\n  \n  ctrl.onDragEnd = function(e) {\n    console.log('onDragEnd', e);\n  };\n  \n  ctrl.onDrag = function(e) {\n    console.log('onDrag1', e);\n  };\n\n  ctrl.allowDrop = function(e) {\n    return true;\n  };\n  \n  ctrl.onDrop = function(e) {\n    e.preventDefault();\n    console.log('onDrop', e);\n  };\n  \n  ctrl.onDragOver = function(e) {\n    e.preventDefault();\n    console.log('onDragOver', e);\n  };\n  \n  ctrl.onDragEnter = function(e) {\n    console.log('onDragEnter', e);\n  };\n}\n```\n\n## Draggable directive api\n\nExample:\n\n```html\n\u003cdiv \n  ng-draggable\n  allow-drag=\"ctrl.allowDrag\"\n  on-drag-start=\"ctrl.onDragStart\"\n  on-drag=\"ctrl.onDrag\"\n  on-drag-end=\"ctrl.onDragEnd\"\n  dragEffect=\"copy\"\n\u003e\n  Draggable div\n\u003c/div\u003e\n```\n\nDirective params:\n\n* allowDrag {Function} - allow/disallow dragging\n* onDragStart {Function} - handler of drag start event\n* onDrag {Function} - handler of drag event\n* onDragEnd {Function} - handler of drag end event\n* dragEffect {String} - effect to be used. Automaticaly sets during drag start.\n[see Drag Operations](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drageffects)\n\n## Droppable directive api\n\nExample:\n\n```html\n\u003cdiv \n  ng-droppable\n  allow-drop=\"ctrl.allowDrop\"\n  on-drag-enter=\"ctrl.onDragEnter\"\n  on-drag-over=\"ctrl.onDragOver\"\n  on-drop=\"ctrl.onDrop\"\n\u003e\n  Droppable zone\n\u003c/div\u003e\n```\n\nDirective params:\n\n* onDragEnter {Function} - handler of drag enter event\n* onDragOver {Function} - handler of drag over event\n* onDrop {Function} - handler of drop event\n* allowDrop {Function} - allow/disallow drop. It automaticaly prevent event in drag over handler. If nothing passed, you have to manually control process in onDragOver. (see [Specifying Drop Targets](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falehatsman%2Fng1-html5-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falehatsman%2Fng1-html5-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falehatsman%2Fng1-html5-dnd/lists"}