Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 22 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,38 +66,41 @@ The directives are structured like below.
#### Placeholder:
- By default a placeholder element is created using the same tag as the as-sortable-item element
- CSS styling may be applied via the `as-sortable-placeholder` class
- Additional classes may be applied via the `additionalPlaceholderClass` option provided to the as-sortable item. e.g.
- Additional classes may be applied via the `additionalPlaceholderClass` option provided to the as-sortable item. e.g.
in JS:
```$scope.sortableOptions = { additionalPlaceholderClass: 'some-class' };```
```$scope.sortableOptions = { additionalPlaceholderClass: 'some-class' };```
in HTML:
```<div as-sortable="sortableOptions">
...
</div>```
```<div as-sortable="sortableOptions">```
...
```</div>```
- A customized placeholder can be provided by specifying the `placeholder` option provided to the as-sortable item. `placeholder` can be both a template string or a function returning a template string.

#### Dragging element CSS
- CSS styling may be applied via the "as-sortable-dragging" class
- When the "as-sortable-item" is being dragged, the CSS class "as-sortable-dragging" is added to all elements.
e.g.
in HTML
```<!--not dragging-->````
```<div class="as-sortable-item"></div>````
```<!--when dragging as-sortable-item-->```
```<div class="as-sortable-item as-sortable-dragging"></div>````

in CSS
.as-sortable-dragging{
border: 1px dotted #000 !important;
}

- When the "as-sortable-item" is being dragged, the CSS class "as-sortable-dragging" is added to all elements.

e.g.
in HTML
```
<!--not dragging-->
<div class="as-sortable-item"></div>
<!--when dragging as-sortable-item-->
<div class="as-sortable-item as-sortable-dragging"></div>
```
in CSS
```
.as-sortable-dragging{
border: 1px dotted #000 !important;
}
```

#### Callbacks:

Following callbacks are defined, and should be overridden to perform custom logic.

- callbacks.accept = function (sourceItemHandleScope, destSortableScope, destItemScope) {}; //used to determine drag zone is allowed are not.

###### Parameters:
##### Parameters:
sourceItemScope - the scope of the item being dragged.
destScope - the sortable destination scope, the list.
destItemScope - the destination item scope, this is an optional Param.(Must check for undefined).
Expand Down