https://github.com/alehatsman/ng1-html5-dnd
An Angular 1 tiny wrapper over native html5 drag and drop functionality.
https://github.com/alehatsman/ng1-html5-dnd
angular dnd javascript
Last synced: about 1 month ago
JSON representation
An Angular 1 tiny wrapper over native html5 drag and drop functionality.
- Host: GitHub
- URL: https://github.com/alehatsman/ng1-html5-dnd
- Owner: alehatsman
- License: mit
- Created: 2017-07-06T18:01:33.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-07T13:06:03.000Z (almost 9 years ago)
- Last Synced: 2025-07-08T00:50:06.540Z (12 months ago)
- Topics: angular, dnd, javascript
- Language: JavaScript
- Size: 30.3 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ng1-html5-dnd
An Angular 1 tiny wrapper over native html5 drag and drop functionality.
## Installation
```bash
npm i --save ng1-html5-dnd
```
## Usage
Then in application with import support.
```javascript
import angular from 'angular';
import 'ng1-html5-dnd';
angular
.module('app-module-name', ['ng1-html5-dnd'])
.component('AppComponent', {
template: `
Draggable div
Droppable zone
`,
controller: AppController,
});
function AppController() {
const ctrl = this;
ctrl.allowDrag = function() {
return true;
};
ctrl.onDragStart = function(e) {
console.log('onDragStart', e);
};
ctrl.onDragEnd = function(e) {
console.log('onDragEnd', e);
};
ctrl.onDrag = function(e) {
console.log('onDrag1', e);
};
ctrl.allowDrop = function(e) {
return true;
};
ctrl.onDrop = function(e) {
e.preventDefault();
console.log('onDrop', e);
};
ctrl.onDragOver = function(e) {
e.preventDefault();
console.log('onDragOver', e);
};
ctrl.onDragEnter = function(e) {
console.log('onDragEnter', e);
};
}
```
## Draggable directive api
Example:
```html
Draggable div
```
Directive params:
* allowDrag {Function} - allow/disallow dragging
* onDragStart {Function} - handler of drag start event
* onDrag {Function} - handler of drag event
* onDragEnd {Function} - handler of drag end event
* dragEffect {String} - effect to be used. Automaticaly sets during drag start.
[see Drag Operations](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#drageffects)
## Droppable directive api
Example:
```html
Droppable zone
```
Directive params:
* onDragEnter {Function} - handler of drag enter event
* onDragOver {Function} - handler of drag over event
* onDrop {Function} - handler of drop event
* 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))