Skip to content

Commit b745ffc

Browse files
Update README.md
1 parent c1d6cc6 commit b745ffc

File tree

1 file changed

+27
-9
lines changed

1 file changed

+27
-9
lines changed

README.md

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ Angular directives that allow you to build sortable lists with the native HTML5
1212

1313
## Supported browsers
1414

15-
Internet Explorer 8 or lower is *not supported*, but all modern browsers are (see changelog for tested versions).
15+
**Touch devices are not supported**, because they do not implement the HTML5 drag & drop standard. However, you can use a [shim](https://github.com/timruffles/ios-html5-drag-drop-shim) to make it work on touch devices as well.
1616

17-
Note that **touch devices are not supported**, because the HTML5 drag & drop standard doesn't cover those. You can try to use a [shim](https://github.com/timruffles/ios-html5-drag-drop-shim) for that though.
17+
Internet Explorer 8 or lower is *not supported*, but all modern browsers are (see changelog for list of tested browsers).
1818

1919

2020
## Download & Installation
@@ -64,13 +64,19 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil
6464
* `event` The original dragover event sent by the browser.
6565
* `index` The position in the list at which the element would be dropped.
6666
* `type` The `dnd-type` set on the dnd-draggable, or undefined if unset.
67+
* `external` Whether the element was dragged from an external source. See `dnd-external-sources`.
6768
* [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
68-
* `dnd-drop` Optional expression that is invoked when an element is dropped over the list. If the expression is set, it must return the object that will be inserted into the list. If it returns false, the drop will be aborted and the event is propagated. The following variables will be available:
69-
* `event` The original drop event sent by the browser.
70-
* `index` The position in the list at which the element would be dropped.
71-
* `item` The transferred object.
72-
* `type` The dnd-type set on the dnd-draggable, or undefined if unset.
73-
* [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
69+
* `dnd-drop` Optional expression that is invoked when an element is dropped on the list.
70+
* The following variables will be available:
71+
* `event` The original drop event sent by the browser.
72+
* `index` The position in the list at which the element would be dropped.
73+
* `item` The transferred object.
74+
* `type` The dnd-type set on the dnd-draggable, or undefined if unset.
75+
* `external` Whether the element was dragged from an external source. See `dnd-external-sources`.
76+
* The return value determines the further handling of the drop:
77+
* `false` The drop will be canceled and the element won't be inserted.
78+
* `true` Signalises that the drop is allowed, but the dnd-drop callback will take care of inserting the element.
79+
* Otherwise: All other return values will be treated as the object to insert into the array. In most cases you simply want to return the `item` parameter, but there are no restrictions on what you can return.
7480
* `dnd-inserted` Optional expression that is invoked after a drop if the element was actually inserted into the list. The same local variables as for `dnd-drop` will be available. Note that for reorderings inside the same list the old element will still be in the list due to the fact that `dnd-moved` was not called yet. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
7581

7682
**CSS classes**
@@ -79,7 +85,19 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil
7985

8086
## dnd-nodrag directive
8187

82-
Use the `dnd-nodrag` attribute inside of `dnd-draggable` elements to prevent them from starting drag operations. This is especially useful if you want to use input elements inside of `dnd-draggable` elements or create specific handle elements. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
88+
Use the `dnd-nodrag` attribute inside of `dnd-draggable` elements to prevent them from starting drag operations. This is especially useful if you want to use input elements inside of `dnd-draggable` elements or create specific handle elements.
89+
90+
**Note:** This directive does not work in Internet Explorer 9.
91+
92+
[Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
93+
94+
## dnd-handle directive
95+
96+
Use the `dnd-handle` directive within a `dnd-nodrag` element in order to allow dragging of that element after all. Therefore, by combining `dnd-nodrag` and `dnd-handle` you can allow `dnd-draggable` elements to only be dragged via specific *handle* elements.
97+
98+
**Note:** Internet Explorer will show the handle element as drag image instead of the `dnd-draggable` element. You can work around this by styling the handle element differently when it is being dragged. Use the CSS selector `.dndDragging:not(.dndDraggingSource) [dnd-handle]` for that.
99+
100+
[Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
83101

84102
## Required CSS styles
85103
Both the dnd-list and it's children require relative positioning, so that the directive can determine the mouse position relative to the list and thus calculate the correct drop position.

0 commit comments

Comments
 (0)