Sortable.create (드래그앤 드롭 처리 관련 API)

Sortable.create

Behaviours > Sortable > create

Sortable.crete는 소트 가능한 엘리먼트를 초기화 하는데 이용된다.

Syntax

Sortable.create('id_of_container', [옵선])은 새로운 소트 가능한 엘리먼트를 지정하는 문장이다.

Options

Option	Since	Description
tag	v1.0	기본값은 'li'이다. 태그의 종류로(컨테이너의 자식 엘리먼트이다.) 이것은 소트 가능하도록 만들어 준다. UL과 OL컨테이너를 위해서 LI를 이용한다. 또한 다른 소트가능한 자식 태그도 제공한다.
only	v1.0	Default: (none) Further restricts the selection of child elements to only encompass elements with the given CSS class (or, if you provide an array of strings, on any of the classes). 기본값은 (none)이다.
overlap	v1.0	Default: ‘vertical’ Either ‘vertical’ or ‘horizontal’. For floating sortables or horizontal lists, choose ‘horizontal’. Vertical lists should use ‘vertical’.
constraint	v1.0	Default: ‘vertical’ Restricts the movement of Draggables, see the constraint option of Draggables.
containment	v1.0	Default: (only within container) Enables dragging and dropping between Sortables. Takes an array of elements or element-ids (of the containers). Important note: To ensure that two way dragging between containers is possible, place all Sortable.create calls after the container elements.
format	v?	Default: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/ The format that the id is computed from each item-id
handle	v1.0	Default: (none) Makes the created Draggables? use handles, see the handle option on Draggables.
hoverclass	v1.1b1	Default: (none) Gives the created Droppables a hoverclass (see there).
ghosting	v1.5	Default: false If set to true, dragged elements of the Sortable will be cloned and appear as “ghost”, i.e. a representation of their original element, instead of directly dragging the original element. See below for more details.
dropOnEmpty	v1.5	Default: false If set to true, the Sortable container will be made into a Droppable?, that can receive a Draggable (as according to the containment rules) as a child element when there are no more elements inside.
scroll	v1.5.2	Default: none When the sortable is contained in an element with style overflow:scroll, this value can be set to the ID of that container (or the container’s DOM object). The scroll position of the container will now move along when the sortable is dragged out of the viewable area. The container must have overflow:scroll set to include scroll bars. Does not yet work for scrolling the entire document. To get this to work correctly, include this line in your code before creating the sortable: Position.includeScrollOffsets = true; Update: Scrolling the whole document does work (at least on IE7 and Firefox). Use scroll: window
scrollSensitivity	v?	Default: 20 Will start scrolling when element is x pixels from the bottom, where x is the scrollSensitivity.
scrollSpeed	v?	Default: 15 Will scroll the element in increments of scrollSpeed pixels.
tree	v1.6.1	Default: false If true, sets sortable functionality to elements listed in treeTag
treeTag	v1.6.1	Default: ul The element type tree nodes are contained in.

Callbacks

Callback	Since	Description
onChange	v1.0	Called whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter.
onUpdate	v1.0	Called when the drag ends and the Sortable’s order is changed in any way. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the container as its parameter. Note that the id attributes of the elements contained in the Sortable must be named as described in Sortable.serialize

Notes

Important: You can use Sortable.create on any container element that contains Block Elements, with the exception of TABLE, THEAD, TBODY and TR. This is a technical restriction with current browsers. A sortable nested somewhere inside a table won’t work well under IE unless the table has a “position:relative” style. If you use the css display: table property, sortable lists will work a little, but doesn’t allow true drag and drop of the elements.

If you want your sortable list to be scrollable, wrap the list in a div and set the div to scrollable as apposed to making the ul element scrollable. Also, in IE you must set “position:relative” on the scrollable div.

Got it working using tbody as container and TR as the sortables (IE6 (pc) and Firefox (mac/pc).

A call to Sortable.create implicitly calls on Sortable.destroy if the referenced element was already a Sortable.

Tutorials

Use PHP and Ajax call to interact with Sortable

Patches

Marking the Drop Zone : Having a marker in the empty place where you will drop (for versions: 1.6.x, 1.7.0, 1.8.0 and 1.8.1)

Have a look at this page for the patch and how to modify scriptaculous to have a drop zone marker.

Tankut Koray