You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 10, 2024. It is now read-only.
There are tons of other drag & drop libraries out there, but none of them met my three requirements:
@@ -25,7 +26,7 @@ If this doesn't fit your requirements, check out one of the other awesome drag &
25
26
26
27
Internet Explorer 8 or lower is *not supported*, but all modern browsers are (see changelog for tested versions).
27
28
28
-
Note that *touch devices* are *not supported*, because the HTML5 drag & drop standard doesn't cover those.
29
+
Note that **touch devices are not supported**, because the HTML5 drag & drop standard doesn't cover those.
29
30
30
31
31
32
## Usage
@@ -38,18 +39,20 @@ Use the dnd-draggable directive to make your element draggable
38
39
39
40
**Attributes**
40
41
*`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.
41
-
*`dnd-selected` Callback that is invoked when the element was clicked but not dragged
42
+
*`dnd-selected` Callback that is invoked when the element was clicked but not dragged. The original click event will be provided in the local `event` variable. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested)
42
43
*`dnd-effect-allowed` Use this attribute to limit the operations that can be performed. Options are:
43
44
*`move` The drag operation will move the element. This is the default
44
45
*`copy` The drag operation will copy the element. There will be a copy cursor.
45
46
*`copyMove` The user can choose between copy and move by pressing the ctrl or shift key.
46
47
**Not supported in IE:* In Internet Explorer this option will be the same as `copy`.
47
48
**Not fully supported in Chrome on Windows:* In the Windows version of Chrome the cursor will always be the move cursor. However, when the user drops an element and has the ctrl key pressed, we will perform a copy anyways.
48
49
* HTML5 also specifies the `link` option, but this library does not actively support it yet, so use it at your own risk.
49
-
*`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.
50
-
*`dnd-copied` Same as dnd-moved, just that it is called when the element was copied instead of moved.
51
-
*`dnd-type` Use this attribute if you have different kinds of items in your application and you want to limit which items can be dropped into which lists. Combine with dnd-allowed-types on the dnd-list(s). This attribute should evaluate to a string, although this restriction is not enforced (at the moment).
52
-
*`dnd-disable-if` You can use this attribute to dynamically disable the draggability of the element. This is useful if you have certain list items that you don't want to be draggable, or if you want to disable drag & drop completely without having two different code branches (e.g. only allow for admins). *Note*: If your element is not draggable, the user is probably able to select text or images inside of it. Since a selection is always draggable, this breaks your UI. You most likely want to disable user selection via CSS (see [user-select](http://stackoverflow.com/a/4407335)).
*`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. The original dragend event will be provided in the local `event` variable. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
52
+
*`dnd-copied` Same as dnd-moved, just that it is called when the element was copied instead of moved. The original dragend event will be provided in the local `event` variable. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
53
+
*`dnd-dragstart` Callback that is invoked when the element was dragged. The original dragstart event will be provided in the local `event` variable. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
54
+
*`dnd-type` Use this attribute if you have different kinds of items in your application and you want to limit which items can be dropped into which lists. Combine with dnd-allowed-types on the dnd-list(s). This attribute should evaluate to a string, although this restriction is not enforced (at the moment). [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
55
+
*`dnd-disable-if` You can use this attribute to dynamically disable the draggability of the element. This is useful if you have certain list items that you don't want to be draggable, or if you want to disable drag & drop completely without having two different code branches (e.g. only allow for admins). *Note*: If your element is not draggable, the user is probably able to select text or images inside of it. Since a selection is always draggable, this breaks your UI. You most likely want to disable user selection via CSS (see [user-select](http://stackoverflow.com/a/4407335)). [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
53
56
54
57
**CSS classes**
55
58
*`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.
@@ -60,8 +63,21 @@ Use the dnd-list attribute to make your list element a dropzone. Usually you wil
60
63
61
64
**Attributes**
62
65
*`dnd-list` Required attribute. The value has to be the array in which the data of the dropped element should be inserted.
63
-
*`dnd-allowed-types` Optional array of allowed item types. When used, only items that had a matching dnd-type attribute will be dropable.
64
-
*`dnd-disable-if` Optional boolean expresssion. When it evaluates to true, no dropping into the list is possible. Note that this also disables rearranging items inside the list.
66
+
*`dnd-allowed-types` Optional array of allowed item types. When used, only items that had a matching dnd-type attribute will be dropable. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
67
+
*`dnd-disable-if` Optional boolean expresssion. When it evaluates to true, no dropping into the list is possible. Note that this also disables rearranging items inside the list. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types)
68
+
*`dnd-horizontal-list` Optional boolean expresssion. When it evaluates to true, the positioning algorithm will use the left and right halfs of the list items instead of the upper and lower halfs. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
69
+
*`dnd-dragover` Optional expression that is invoked when an element is dragged over the list. If the expression is set, but does not return true, the element is not allowed to be dropped. The following variables will be available:
70
+
*`event` The original dragover event sent by the browser.
71
+
*`index` The position in the list at which the element would be dropped.
72
+
*`type` The `dnd-type` set on the dnd-draggable, or undefined if unset.
*`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:
75
+
*`event` The original drop event sent by the browser.
76
+
*`index` The position in the list at which the element would be dropped.
77
+
*`item` The transferred object.
78
+
*`type` The dnd-type set on the dnd-draggable, or undefined if unset.
*`dnd-external-sources` Optional boolean expression. When it evaluates to true, the list accepts drops from sources outside of the current browser tab. This allows to drag and drop accross different browser tabs. Note that this will allow to drop arbitrary text into the list, thus it is highly recommended to implement the dnd-drop callback to check the incoming element for sanity. Furthermore, the dnd-type of external sources can not be determined, therefore do not rely on restrictions of dnd-allowed-type. Also note that this feature does not work very well in Internet Explorer. [Demo](http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/advanced)
65
81
66
82
**CSS classes**
67
83
*`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.
0 commit comments