Overview

A simple, but working drag'n'drop framework for Angular2

Installation

Run npm install --save ngx-frenetiq-dnd

Demo

There's a very basic demo available at https://snorrwe.github.io/frenetiq-dnd

Usage

• Import the ngx-frenetiq-dnd Module into your Module

import { FrenetiqDnd } from 'ngx-frenetiq-dnd/ngx-frenetiq-dnd';

@NgModule({
	//....
    imports: [
        FrenetiqDnd
    ]
    //....
})
export class AppModule {
}

• Make html elements draggable with the frenetiq-draggable directive.
• See the Wiki for more information about the directive and its options.

<div frenetiq-draggable>
	<p>Drag me!</p>
</div>

<div #someName="frenetiq-draggable">
	<p>Drag me!</p>
</div>

• Make html elements drop targets with the frenetiq-container directive.
• See the Wiki for more information about the directive and its options.

<div frenetiq-container></div>

<div #someName="frenetiq-container"></div>

• CSS
  • FrenetiqDnd uses the fren-drag css class on items that are being dragged
  • FrenetiqDnd uses the fren-hover css class on valid containers when you drag an item over it.

.fren-drag{
	background-color:red; /* Make dragged items red */	
}

• You can listen to events either via the Directives or by subscribing to the DragService
• See the Wiki for more information about the service and its API.

@Component({
	template: `
	<div frenetiq-container>
			<div frenetiq-draggable [parent]="this" (onDragEnd)="onDragEnd($event)">Drag me!</div>
	</div>
`
})
class SomeComponent {
	constructor(private dragService: DragService) {
		this.dragService
		    .onDragEnd()
		    .subscribe((draggable) => {
		        if (draggable.parent === this) {
		            //Draggable has been dropped on its parent.
		            console.log("Oh, you're back!", draggable, this);
		        }
		    });
	}

	private onDragEnd(draggable) {
		console.log("Child has been released!", draggable, this);
	}

}

Sample code

TBA

API Documentation

Please refer to the Wiki

Contributing

Build files

• single run: npm run build
• build files and watch: npm run watch

Testing

• Please note that all pull requests must pass the tests in order to be merged into master. This project uses https://travis-ci.org to enforce successful builds on master.

• Running the tests locally:

  • single run: npm run test
  • watch: npm run test-watch

Deployment

Deployment is done via Travis CI. Mark the package for deployment by running npm version <update\_type>* in the dist directory

* where update_type is one of the semantic versioning release types, patch, minor, or major. For more info go to npm

Credits

• Project setup based on angular2-webpack
• Testing strategies found from Angular —  Unit Testing recipes by Gerard Sans
• 
• 

License

MIT