From a6129126450ee9aaa410b5bb3311c8d45b187fd2 Mon Sep 17 00:00:00 2001 From: Marcel Juenemann Date: Fri, 11 Apr 2014 00:44:47 +0200 Subject: [PATCH] Update README.md --- README.md | 37 +++++++++++++++---------------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 57bb42b..ac647c4 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,11 @@ angular-drag-and-drop-lists =========================== Angular directives that allow you to build sortable lists with the native HTML5 drag & drop API. The directives can also be nested to bring drag & drop to your WYSIWYG editor, your tree, or whatever fancy structure you are building. - -Demo -==== +## Demo * [Nested Lists](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested) * [Simple Lists](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple) - -Why another drag & drop library? -================================ +## Why another drag & drop library? There are tons of other drag & drop libraries out there, but none of them met my three requirements: * **Angular:** If you use angular.js, you really don't want to throw a bunch of jQuery into your app. Instead you want to use libraries that were build the "angular way" and support **two-way data binding** to update your data model automatically. @@ -24,8 +20,7 @@ If this doesn't fit your requirements, check out one of the other awesome drag & * [more...](https://www.google.de/search?q=angular+drag+and+drop) -Supported browsers -================== +## Supported browsers Tested in recent versions of * Chrome @@ -33,16 +28,15 @@ Tested in recent versions of * Safari * IE >= 9 -Usage -===== +## Usage -## Download & Installation -Download `angular-drag-and-drop-lists.js` (or the minified version) and include it in your application. Add the "dndLists" module as dependency to your angular app. +### Download & Installation +Download `angular-drag-and-drop-lists.js` (or the minified version) and include it in your application. Add the `dndLists` module as dependency to your angular app. -## dnd-draggable directive +### dnd-draggable directive Use the dnd-draggable directive to make your element draggable -### Attributes +**Attributes** * `dnd-draggable` Required attribute. The value has to be an object that represents the data of the element. In case of a drag and drop operation the object will be serialized and unserialized on the receiving end. * `dnd-selected` Callback that is invoked when the element was clicked but not dragged * `dnd-effect-allowed` Use this attribute to limit the operations that can be performed. Options are: @@ -55,21 +49,21 @@ Use the dnd-draggable directive to make your element draggable * `dnd-moved` Callback that is invoked when the element was moved. Usually you will remove your element from the original list in this callback, since the directive is not doing that for you automatically. * `dnd-copied` Same as dnd-moved, just that it is called when the element was copied instead of moved. -### CSS classes +**CSS classes** * `dndDragging` This class will be added to the element while the element is being dragged. It will affect both the element you see while dragging and the source element that stays at it's position. Do not try to hide the source element with this class, because that will abort the drag operation. * `dndDraggingSource` This class will be added to the element after the drag operation was started, meaning it only affects the original element that is still at it's source position, and not the "element" that the user is dragging with his mouse pointer -## dnd-list directive +### dnd-list directive Use the dnd-list attribute to make your list element a dropzone. Usually you will add a single li element as child with the ng-repeat directive. If you don't do that, we will not be able to position the dropped element correctly. If you want your list to be sortable, also add the dnd-draggable directive to your li element(s). Both the dnd-list and it's direct children must have position: relative CSS style, otherwise the positioning algorithm will not be able to determine the correct placeholder position in all browsers. If you use nested dnd-lists, make sure that all elements excecpt for the dnd-lists and it's direct children have the pointer-events: none CSS style. -## Attributes +**Attributes** * `dnd-list` Required attribute. The value has to be the array in which the data of the dropped element should be inserted. -## CSS classes +**CSS classes** * `dndPlaceholder` When an element is dragged over the list, a new placeholder child element will be added. This element is of type li and has the class dndPlaceholder set. * `dndDragover` This class will be added to the list while an element is being dragged over the list. -## Required CSS styles +### Required CSS styles * `pointer-events: none` With nested lists it's very important that **only the dnd-list and it's children** react to mouse events. * `position: relative` Both the dnd-list and it's children require this, so that the directive can determine the mouse position relative to the list and thus calculate the correct drop position. @@ -84,13 +78,12 @@ ul[dnd-list], ul[dnd-list] > li { } -## Example +### Example Take a look at the code in the [Simple Lists](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple) example -License -======= +## License Copyright (c) 2014 [Marcel Juenemann](mailto:mail@marcel-junemann.de)