bitovi / bitovi/canui

can.ui.Sortable API

Open
#9 1 comment 0 reactions 1 assignee Claimed by @andykant View on GitHub
Dominant language
JavaScript
Stars
28
Forks
23
PR merge metrics
No merged PRs in 30d

Description

## Purpose
- A sortable list that can be hooked up to a can.Observe.List for live updates.
## Learn from
- [Mxui.Layout.Sortable](http://javascriptmvc.com/docs.html#!Mxui.Layout.Sortable)
- [jQuery UI Sortable](http://jqueryui.com/demos/sortable/)
## Options
- `[containment=null]` _Element | Selector_ - A container to constrain dragging of items within. Defaults to the `parent`.
- `[constrain=null]` _String_ - Whether to enforce a constrained dragging direction.
- `'x'` - Constrain to the x-axis.
- `'y'` - Constrain to the y-axis.
- `[disabled=false]` _Boolean_ - Whether sorting is disabled.
- `[delay=500]` _Number_ - Drag delay in milliseconds prior to starting sorting.
- `[distance=1]` _Number_ - Drag distance in pixels prior to starting sorting.
- `[handle=null]` _Selector_ - The selector for a child element to be used as a handle for initializing sorts.
- `[helper='original']` _String | Function_ - What element to use for dragging an item.
- `'original'` - Use the original element.
- `'clone'` - Clone the original element.
- _Function_ - Returns an element to use.
- `items` _can.Observe.List | Array | Deferred | Selector | can.compute_
- _can.Observe.List_ - A list to be used with default markup.
- _Array_ - An array that will be converted to a list with default markup.
- _Deferred_ - Sets the sortable to loading state that renders on resolve.
- _Selector_ - A selector for children of the parent to determine the list of items.
- _can.compute_ - A compute that returns any of the above.
- `parent` _Element_ - The containing element for the sortable list.
- `[placeholder=null]` _Element_ - An element to clone as placeholder elements to fill white space.
- `[revert=false]` _Boolean | Number_ - Whether to smoothly revert the dragged item with an animation. If set to a _Number_, the speed in milliseconds at which the revert is animated.
- `[scroll=true]` _Boolean_ - Whether to auto-scroll when sorting and the mouse comes near an edge of the list.
- `[scrollDistance=20]` _Number_ - The distance in pixels at which auto-scrolling begins.
- `[scrollSpeed=20]` _Number_ - The speed in milliseconds at which the sortable auto-scrolls.
- `[template=null]` _View_ - A template to use to render items when using types other than _Selector_ for `items`.
- `[validate=null]` _Function_ - Validates elements dropped onto the sortable from external sources. Default: All drops denied.
- `[zIndex=1000]` _Number_ - The z-index of the dragged item while sorting.
## Events
- `add` - An external item has been dropped into the list.
- `change` - The sortable list has been altered.
- `over` - An external item is being dragged over the list.
- `out` - An external item is no longer being dragged over the list.
- `sortstart` - A sort has been initialized.
- `sort` - A sort has been updated.
- `sortend` - A sort has finished.
- `remove` - An item has been dropped externally and removed.
## Methods
- `disable` - Disables sorting.
- `enable` - Enables sorting.
## Theming
- Follows Twitter Bootstrap conventions. Include stylesheets with `steal('canui/style')`.
## Examples
#### Creating a sortable:

``` javascript
var sortable = new can.ui.Sortable('#list', {
items: new can.Observe.List()
});
```
#### Basic example:
- TODO
#### Using custom helpers:
- TODO
#### Using custom helpers to drop multiple items:
- TODO
#### Handling drops from external sources:
- TODO
#### Listening to sorts and updating DBs:
- TODO: something that listens to the order being changed on an Observe.List and is able to update the DB accordingly (possibly updating some index property).
## Notes
- `options.helper`'s _Function_ type is equivalent to how placeholders were handled in MXUI's Sortable.
- how would we know the instance that is being added via drag-drop?
- support multiple instances?
- pass the list and a view for inside the li?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.