Jump to content

WebObjects/Project WONDER/Frameworks/Ajax/AjaxSortableList

From Wikibooks, open books for an open world

AjaxSortableList

[edit | edit source]

AjaxSortableList provides support for automatic reordering of an NSArray based on an Ajax drag-and-drop list. AjaxSortableList is a WOComponentContent. By default, it renders an unordered list.

A demo of the Scriptaculous sortable list is available here.

Wonder Bindings
[edit | edit source]
  • id - the id of the list (required)
  • list - the list to allow reordering on (required)
  • item - the repetition item (required)
  • listElementName - the HTML element name of the list (defaults to 'ul')
  • listItemElementName - the HTML element name of the list item (defaults to 'li')
  • listItemIDKeyPath - the unique identifier key path of the id of each item, currently the id has to be numeric (required)
  • listItemClass - the css class for a list item
  • listItemStyle - style attribute for a list item
  • listClass - the css class for the list wrapper
  • listStyle - style attribute for the list wrapper
  • startIndex - only allow reordering of the list starting at this index
  • action - the action to fire when the list is reordered. When the action fires, the "list" binding will contain an NSArray that has been reordered to match the reordering the user performed.
Scriptaculous Bindings
[edit | edit source]

Scriptaculous Documentation

  • tag
  • only
  • overlap
  • constraint
  • containment
  • handle
    • the handle binding will be the css class name of the element that is to be used as a handle. For example, if you have an image that will be used as the handle for the draggable area, you would put it within a span and set class="handleName" on the span. Then simply set the handle property of the AjaxSortableList component to "handleName". An additional tip, set the cursor style to "move" on mouse over and the cursor will change to the four arrows icon indicating that the user is over the handle.
  • hoverclass
  • ghosting
  • dropOnEmpty
  • scroll
  • onChange
  • onUpdate