DragModule

This page contains all of the demos for DragModule Core, Slider, ColorPicker, and DragPane.

All demos open in a new window.

Onsite Demos

The demos are partially keyboard accessible. Some operations, such as copy-paste, have not been implemented yet.

Module: Core
- CSS Editor-
  The HSV Color Selector and the CssEditor itself feature dragging.
  
  The CSSEditor has a styleSheet property that is an actual stylesheet, and uses the DOM Style Modules.
  
  It uses a rule-mapping, performing a similar algorithm that the browser applies. The mapping matches an element to its most specific matching rule (as opposed to matching multiple RuleSets). (This is facilitated by Dean's CSSQuery)
  
  This allows the user to select an element (by clicking), allowing the user to edit the rule.
  
  When an element is selected, the most specific selector in the stylesheet is matched to that element and the CSSEditor's components are populated with the property: value pairs of the selector's corresponding RuleSet in the styleSheet.
- Drop Target (Simple)-
  Shows how multiple items can be draggable (dragMultiple = true). Uses a dropTarget (trash).
  
  Uses dragCopy = true to allow for dragging multiple items, using a separate className (activeDragClassName), that contains special appearance (opacity, et c).
  
  Uses CSS:active for the instructions' active drag state. Note that :active is not supported in IE7. Other elements (such as the Folders) have an activeDragClassName.
  
  Uses nested draggable items (desktop can be dragged).
- Sortable Table - Drag Relatively positioned divs inside table headers (<th>) and drop them on other divs to reorder the table.
Module: Slider

The missing element from HTML forms. Slider degrades to non-supporting browsers.
- Volume Control - Slider
Module: Color Picker (requires Slider)

RGB ColorPicker that uses Slider.
- Color Picker
Module: Sortable Track List

Drag and drop tracks to change the order of the track list.
- Sortable Track List
- Long Sortable Track List -(added Oct 5, 2004)

AnimTree

Tabs

GlideMenus

DragLib

DragModule

Onsite Demos

Module: Core

Module: Slider

Module: Color Picker (requires Slider)

Module: Sortable Track List

Tags

Archived Scripts