Dragable sorted list : Drag Drop « GUI Components « JavaScript DHTML






Dragable sorted list

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><!-- Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) --><title>Drag &amp; Drop Sortable Lists with JavaScript and CSS</title>
<!-- common.css -->
<style rel="stylesheet" type="text/css" href="">
body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  margin: 0px;
  padding: 0px 20px;
  min-width: 30em;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0px;
}
h2, h3, h4, h5, h6 {
  font-family: Optima, Verdana, sans-serif;
  margin: 1em -10px 0.5em -10px;
}
h2 { margin-top: 1.5em; }
h1 {
  font-size: 22px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 5px 10px 5px 10px;
  color: #fff;
  text-shadow: #8760c1 0px 0px 5px;
}
.breadcrumb {
  list-style-type: none;
  padding: 0px;
  padding-left: 20px;
  margin: 0px;
  margin-bottom: 10px;
  border-style: solid;
  border-color: #8760c1;
  border-width: 1px 0px;
  height: 19px;
}
.breadcrumb li.first {
  border-left: 1px solid #8760c1;
}
.breadcrumb li {
  float: left;
  border-right: 1px solid #8760c1;
  padding: 3px 10px;
}
.breadcrumb li a {
  display: block;
  text-decoration: none;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}
h1, .breadcrumb {
  font-family: Skia;
  background-color: #ccaaff;
  margin-left: -20px;
  margin-right: -20px;
}

h2 { font-size: 22px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p {
  margin-top: 0px;
  margin-bottom: 1em;
  text-align: justify;
  max-width: 40em;
}
li p {
  margin-bottom: 0.75em;
}
br.clear {
  clear: both;
  margin: 0px;
}
.sidebar {
  margin: 0px 10px 30px 30px;
  clear: right;
  float: right;
  width: 134px;
  border: 1px solid #8760c1;
  background-color: #ccaaff;
  padding: 5px;
  font-size: 11px;
    font-family: 'Lucida Grande', Geneva, Verdana, Helvetica, Arial, sans-serif;
    -moz-border-radius: 0px 10px 0px 10px;
    border-radius: 0px 10px 0px 10px;
}
.sidebar, .sidebar p, .sidebar li {
  text-align: left;
}
.sidebar ul {
  margin: 0px;
  margin-left: 1.5em;
  padding: 0px;
  list-style-type: circle;
}

td.caption {
  font-size: 12px;
  text-align: center;
}
#copyright {
  margin-bottom: 1em;
  text-align: center;
  font-size: 11px;
}
blockquote {
  font-size: 13px;
  font-style: italic;
}
blockquote .attribution {
  font-weight: normal;
  font-style: normal;
  text-align: right;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { background-color: #ffd700; }

</style>
<!-- lists.css -->
<style rel="stylesheet" type="text/css" href="">
ul.sortable li {
  position: relative;
}

ul.boxy {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  width: 10em;
  font-size: 13px;
  font-family: Arial, sans-serif;
}
ul.boxy li {
  cursor:move;
  padding: 2px 2px;
  border: 1px solid #ccc;
  background-color: #eee;
}
.clickable a {
  display: block;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
}
.clickable li:hover {
  background-color: #f6f6f6;
}

</style>
<style type="text/css"><!--
  .statusbox {
    font-size: 13px;
    font-family: Monaco, monospace;
    width: 15em;
  }
  ul.boxy li { margin: 0px; }
  #phonetics td {
    margin: 0px;
    padding: 0px 1em;
    vertical-align: top;
    width: 100px;
  }
  #phonetic1 li, #phonetic2 li, #phonetic3 li { margin: 0px; }
  #phonetic2 li {
    margin-bottom: 4px;
  }
  #phonetic3 { margin-top: -4px; }
  #phonetic3 li { margin-top: 4px; }
  #phoneticlong {
    margin-bottom: 1em;
  }
  #phoneticlong li, #buttons li {
    margin-bottom: 0px;
    margin-top: 4px;
  }

  #boxes {
    font-family: Arial, sans-serif;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 300px;
  }
  #boxes li {
    cursor: move;
    position: relative;
    float: left;
    margin: 2px 2px 0px 0px;
    width: 33px;
    height: 28px;
    border: 1px solid #000;
    text-align: center;
    padding-top: 5px;
    background-color: #eeeeff;
  }

  #twolists td {
    width: 300px;
    vertical-align: top;
  }
  #twolists1 li {
    font-family: sans-serif;
  }
  #twolists2 {
    border: 1px dashed #fff;
  }
  #twolists2 li {
    font-family: serif;
    background-color: #eedddd;
  }
  .inspector {
    font-size: 11px;
  }
  //-->
</style>
<!-- core.js -->
<script language="JavaScript" type="text/javascript">
/*
Copyright (c) 2005 Tim Taylor Consulting <http://tool-man.org/>

Permission is hereby granted, free of charge, to any person obtaining a
copy of this software and associated documentation files (the "Software"),
to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
*/

var ToolMan = {
  events : function() {
    if (!ToolMan._eventsFactory) throw "ToolMan Events module isn't loaded";
    return ToolMan._eventsFactory
  },

  css : function() {
    if (!ToolMan._cssFactory) throw "ToolMan CSS module isn't loaded";
    return ToolMan._cssFactory
  },

  coordinates : function() {
    if (!ToolMan._coordinatesFactory) throw "ToolMan Coordinates module isn't loaded";
    return ToolMan._coordinatesFactory
  },

  drag : function() {
    if (!ToolMan._dragFactory) throw "ToolMan Drag module isn't loaded";
    return ToolMan._dragFactory
  },

  dragsort : function() {
    if (!ToolMan._dragsortFactory) throw "ToolMan DragSort module isn't loaded";
    return ToolMan._dragsortFactory
  },

  helpers : function() {
    return ToolMan._helpers
  },

  cookies : function() {
    if (!ToolMan._cookieOven) throw "ToolMan Cookie module isn't loaded";
    return ToolMan._cookieOven
  },

  junkdrawer : function() {
    return ToolMan._junkdrawer
  }

}

ToolMan._helpers = {
  map : function(array, func) {
    for (var i = 0, n = array.length; i < n; i++) func(array[i])
  },

  nextItem : function(item, nodeName) {
    if (item == null) return
    var next = item.nextSibling
    while (next != null) {
      if (next.nodeName == nodeName) return next
      next = next.nextSibling
    }
    return null
  },

  previousItem : function(item, nodeName) {
    var previous = item.previousSibling
    while (previous != null) {
      if (previous.nodeName == nodeName) return previous
      previous = previous.previousSibling
    }
    return null
  },

  moveBefore : function(item1, item2) {
    var parent = item1.parentNode
    parent.removeChild(item1)
    parent.insertBefore(item1, item2)
  },

  moveAfter : function(item1, item2) {
    var parent = item1.parentNode
    parent.removeChild(item1)
    parent.insertBefore(item1, item2 ? item2.nextSibling : null)
  }
}

/** 
 * scripts without a proper home
 *
 * stuff here is subject to change unapologetically and without warning
 */
ToolMan._junkdrawer = {
  serializeList : function(list) {
    var items = list.getElementsByTagName("li")
    var array = new Array()
    for (var i = 0, n = items.length; i < n; i++) {
      var item = items[i]

      array.push(ToolMan.junkdrawer()._identifier(item))
    }
    return array.join('|')
  },

  inspectListOrder : function(id) {
    alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
  },

  restoreListOrder : function(listID) {
    var list = document.getElementById(listID)
    if (list == null) return

    var cookie = ToolMan.cookies().get("list-" + listID)
    if (!cookie) return;

    var IDs = cookie.split('|')
    var items = ToolMan.junkdrawer()._itemsByID(list)

    for (var i = 0, n = IDs.length; i < n; i++) {
      var itemID = IDs[i]
      if (itemID in items) {
        var item = items[itemID]
        list.removeChild(item)
        list.insertBefore(item, null)
      }
    }
  },

  _identifier : function(item) {
    var trim = ToolMan.junkdrawer().trim
    var identifier

    identifier = trim(item.getAttribute("id"))
    if (identifier != null && identifier.length > 0) return identifier;
    
    identifier = trim(item.getAttribute("itemID"))
    if (identifier != null && identifier.length > 0) return identifier;
    
    // FIXME: strip out special chars or make this an MD5 hash or something
    return trim(item.innerHTML)
  },

  _itemsByID : function(list) {
    var array = new Array()
    var items = list.getElementsByTagName('li')
    for (var i = 0, n = items.length; i < n; i++) {
      var item = items[i]
      array[ToolMan.junkdrawer()._identifier(item)] = item
    }
    return array
  },

  trim : function(text) {
    if (text == null) return null
    return text.replace(/^(\s+)?(.*\S)(\s+)?$/, '$2')
  }
}

</script>
<!-- events.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */

ToolMan._eventsFactory = {
  fix : function(event) {
    if (!event) event = window.event

    if (event.target) {
      if (event.target.nodeType == 3) event.target = event.target.parentNode
    } else if (event.srcElement) {
      event.target = event.srcElement
    }

    return event
  },

  register : function(element, type, func) {
    if (element.addEventListener) {
      element.addEventListener(type, func, false)
    } else if (element.attachEvent) {
      if (!element._listeners) element._listeners = new Array()
      if (!element._listeners[type]) element._listeners[type] = new Array()
      var workaroundFunc = function() {
        func.apply(element, new Array())
      }
      element._listeners[type][func] = workaroundFunc
      element.attachEvent('on' + type, workaroundFunc)
    }
  },

  unregister : function(element, type, func) {
    if (element.removeEventListener) {
      element.removeEventListener(type, func, false)
    } else if (element.detachEvent) {
      if (element._listeners 
          && element._listeners[type] 
          && element._listeners[type][func]) {

        element.detachEvent('on' + type, 
            element._listeners[type][func])
      }
    }
  }
}

</script>
<!-- css.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */

// TODO: write unit tests
ToolMan._cssFactory = {
  readStyle : function(element, property) {
    if (element.style[property]) {
      return element.style[property]
    } else if (element.currentStyle) {
      return element.currentStyle[property]
    } else if (document.defaultView && document.defaultView.getComputedStyle) {
      var style = document.defaultView.getComputedStyle(element, null)
      return style.getPropertyValue(property)
    } else {
      return null
    }
  }
}

</script>
<!-- coordinates.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */

/* FIXME: assumes position styles are specified in 'px' */

ToolMan._coordinatesFactory = {

  create : function(x, y) {
    // FIXME: Safari won't parse 'throw' and aborts trying to do anything with this file
    //if (isNaN(x) || isNaN(y)) throw "invalid x,y: " + x + "," + y
    return new _ToolManCoordinate(this, x, y)
  },

  origin : function() {
    return this.create(0, 0)
  },

  /*
   * FIXME: Safari 1.2, returns (0,0) on absolutely positioned elements
   */
  topLeftPosition : function(element) {
    var left = parseInt(ToolMan.css().readStyle(element, "left"))
    var left = isNaN(left) ? 0 : left
    var top = parseInt(ToolMan.css().readStyle(element, "top"))
    var top = isNaN(top) ? 0 : top

    return this.create(left, top)
  },

  bottomRightPosition : function(element) {
    return this.topLeftPosition(element).plus(this._size(element))
  },

  topLeftOffset : function(element) {
    var offset = this._offset(element) 

    var parent = element.offsetParent
    while (parent) {
      offset = offset.plus(this._offset(parent))
      parent = parent.offsetParent
    }
    return offset
  },

  bottomRightOffset : function(element) {
    return this.topLeftOffset(element).plus(
        this.create(element.offsetWidth, element.offsetHeight))
  },

  scrollOffset : function() {
    if (window.pageXOffset) {
      return this.create(window.pageXOffset, window.pageYOffset)
    } else if (document.documentElement) {
      return this.create(
          document.body.scrollLeft + document.documentElement.scrollLeft, 
          document.body.scrollTop + document.documentElement.scrollTop)
    } else if (document.body.scrollLeft >= 0) {
      return this.create(document.body.scrollLeft, document.body.scrollTop)
    } else {
      return this.create(0, 0)
    }
  },

  clientSize : function() {
    if (window.innerHeight >= 0) {
      return this.create(window.innerWidth, window.innerHeight)
    } else if (document.documentElement) {
      return this.create(document.documentElement.clientWidth,
          document.documentElement.clientHeight)
    } else if (document.body.clientHeight >= 0) {
      return this.create(document.body.clientWidth,
          document.body.clientHeight)
    } else {
      return this.create(0, 0)
    }
  },

  /**
   * mouse coordinate relative to the window (technically the
   * browser client area) i.e. the part showing your page
   *
   * NOTE: in Safari the coordinate is relative to the document
   */
  mousePosition : function(event) {
    event = ToolMan.events().fix(event)
    return this.create(event.clientX, event.clientY)
  },

  /**
   * mouse coordinate relative to the document
   */
  mouseOffset : function(event) {
    event = ToolMan.events().fix(event)
    if (event.pageX >= 0 || event.pageX < 0) {
      return this.create(event.pageX, event.pageY)
    } else if (event.clientX >= 0 || event.clientX < 0) {
      return this.mousePosition(event).plus(this.scrollOffset())
    }
  },

  _size : function(element) {
  /* TODO: move to a Dimension class */
    return this.create(element.offsetWidth, element.offsetHeight)
  },

  _offset : function(element) {
    return this.create(element.offsetLeft, element.offsetTop)
  }
}

function _ToolManCoordinate(factory, x, y) {
  this.factory = factory
  this.x = isNaN(x) ? 0 : x
  this.y = isNaN(y) ? 0 : y
}

_ToolManCoordinate.prototype = {
  toString : function() {
    return "(" + this.x + "," + this.y + ")"
  },

  plus : function(that) {
    return this.factory.create(this.x + that.x, this.y + that.y)
  },

  minus : function(that) {
    return this.factory.create(this.x - that.x, this.y - that.y)
  },

  min : function(that) {
    return this.factory.create(
        Math.min(this.x , that.x), Math.min(this.y , that.y))
  },

  max : function(that) {
    return this.factory.create(
        Math.max(this.x , that.x), Math.max(this.y , that.y))
  },

  constrainTo : function (one, two) {
    var min = one.min(two)
    var max = one.max(two)

    return this.max(min).min(max)
  },

  distance : function (that) {
    return Math.sqrt(Math.pow(this.x - that.x, 2) + Math.pow(this.y - that.y, 2))
  },

  reposition : function(element) {
    element.style["top"] = this.y + "px"
    element.style["left"] = this.x + "px"
  }
}

</script>
<!-- drag.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */

ToolMan._dragFactory = {
  createSimpleGroup : function(element, handle) {
    handle = handle ? handle : element
    var group = this.createGroup(element)
    group.setHandle(handle)
    group.transparentDrag()
    group.onTopWhileDragging()
    return group
  },

  createGroup : function(element) {
    var group = new _ToolManDragGroup(this, element)

    var position = ToolMan.css().readStyle(element, 'position')
    if (position == 'static') {
      element.style["position"] = 'relative'
    } else if (position == 'absolute') {
      /* for Safari 1.2 */
      ToolMan.coordinates().topLeftOffset(element).reposition(element)
    }

    // TODO: only if ToolMan.isDebugging()
    group.register('draginit', this._showDragEventStatus)
    group.register('dragmove', this._showDragEventStatus)
    group.register('dragend', this._showDragEventStatus)

    return group
  },

  _showDragEventStatus : function(dragEvent) {
    window.status = dragEvent.toString()
  },

  constraints : function() {
    return this._constraintFactory
  },

  _createEvent : function(type, event, group) {
    return new _ToolManDragEvent(type, event, group)
  }
}

function _ToolManDragGroup(factory, element) {
  this.factory = factory
  this.element = element
  this._handle = null
  this._thresholdDistance = 0
  this._transforms = new Array()
  // TODO: refactor into a helper object, move into events.js
  this._listeners = new Array()
  this._listeners['draginit'] = new Array()
  this._listeners['dragstart'] = new Array()
  this._listeners['dragmove'] = new Array()
  this._listeners['dragend'] = new Array()
}

_ToolManDragGroup.prototype = {
  /*
   * TODO:
   *   - unregister(type, func)
   *   - move custom event listener stuff into Event library
   *   - keyboard nudging of "selected" group
   */

  setHandle : function(handle) {
    var events = ToolMan.events()

    handle.toolManDragGroup = this
    events.register(handle, 'mousedown', this._dragInit)
    handle.onmousedown = function() { return false }

    if (this.element != handle)
      events.unregister(this.element, 'mousedown', this._dragInit)
  },

  register : function(type, func) {
    this._listeners[type].push(func)
  },

  addTransform : function(transformFunc) {
    this._transforms.push(transformFunc)
  },

  verticalOnly : function() {
    this.addTransform(this.factory.constraints().vertical())
  },

  horizontalOnly : function() {
    this.addTransform(this.factory.constraints().horizontal())
  },

  setThreshold : function(thresholdDistance) {
    this._thresholdDistance = thresholdDistance
  },

  transparentDrag : function(opacity) {
    var opacity = typeof(opacity) != "undefined" ? opacity : 0.75;
    var originalOpacity = ToolMan.css().readStyle(this.element, "opacity")

    this.register('dragstart', function(dragEvent) {
      var element = dragEvent.group.element
      element.style.opacity = opacity
      element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'
    })
    this.register('dragend', function(dragEvent) {
      var element = dragEvent.group.element
      element.style.opacity = originalOpacity
      element.style.filter = 'alpha(opacity=100)'
    })
  },

  onTopWhileDragging : function(zIndex) {
    var zIndex = typeof(zIndex) != "undefined" ? zIndex : 100000;
    var originalZIndex = ToolMan.css().readStyle(this.element, "z-index")

    this.register('dragstart', function(dragEvent) {
      dragEvent.group.element.style.zIndex = zIndex
    })
    this.register('dragend', function(dragEvent) {
      dragEvent.group.element.style.zIndex = originalZIndex
    })
  },

  _dragInit : function(event) {
    event = ToolMan.events().fix(event)
    var group = document.toolManDragGroup = this.toolManDragGroup
    var dragEvent = group.factory._createEvent('draginit', event, group)

    group._isThresholdExceeded = false
    group._initialMouseOffset = dragEvent.mouseOffset
    group._grabOffset = dragEvent.mouseOffset.minus(dragEvent.topLeftOffset)
    ToolMan.events().register(document, 'mousemove', group._drag)
    document.onmousemove = function() { return false }
    ToolMan.events().register(document, 'mouseup', group._dragEnd)

    group._notifyListeners(dragEvent)
  },

  _drag : function(event) {
    event = ToolMan.events().fix(event)
    var coordinates = ToolMan.coordinates()
    var group = this.toolManDragGroup
    if (!group) return
    var dragEvent = group.factory._createEvent('dragmove', event, group)

    var newTopLeftOffset = dragEvent.mouseOffset.minus(group._grabOffset)

    // TODO: replace with DragThreshold object
    if (!group._isThresholdExceeded) {
      var distance = 
          dragEvent.mouseOffset.distance(group._initialMouseOffset)
      if (distance < group._thresholdDistance) return
      group._isThresholdExceeded = true
      group._notifyListeners(
          group.factory._createEvent('dragstart', event, group))
    }

    for (i in group._transforms) {
      var transform = group._transforms[i]
      newTopLeftOffset = transform(newTopLeftOffset, dragEvent)
    }

    var dragDelta = newTopLeftOffset.minus(dragEvent.topLeftOffset)
    var newTopLeftPosition = dragEvent.topLeftPosition.plus(dragDelta)
    newTopLeftPosition.reposition(group.element)
    dragEvent.transformedMouseOffset = newTopLeftOffset.plus(group._grabOffset)

    group._notifyListeners(dragEvent)

    var errorDelta = newTopLeftOffset.minus(coordinates.topLeftOffset(group.element))
    if (errorDelta.x != 0 || errorDelta.y != 0) {
      coordinates.topLeftPosition(group.element).plus(errorDelta).reposition(group.element)
    }
  },

  _dragEnd : function(event) {
    event = ToolMan.events().fix(event)
    var group = this.toolManDragGroup
    var dragEvent = group.factory._createEvent('dragend', event, group)

    group._notifyListeners(dragEvent)

    this.toolManDragGroup = null
    ToolMan.events().unregister(document, 'mousemove', group._drag)
    document.onmousemove = null
    ToolMan.events().unregister(document, 'mouseup', group._dragEnd)
  },

  _notifyListeners : function(dragEvent) {
    var listeners = this._listeners[dragEvent.type]
    for (i in listeners) {
      listeners[i](dragEvent)
    }
  }
}

function _ToolManDragEvent(type, event, group) {
  this.type = type
  this.group = group
  this.mousePosition = ToolMan.coordinates().mousePosition(event)
  this.mouseOffset = ToolMan.coordinates().mouseOffset(event)
  this.transformedMouseOffset = this.mouseOffset
  this.topLeftPosition = ToolMan.coordinates().topLeftPosition(group.element)
  this.topLeftOffset = ToolMan.coordinates().topLeftOffset(group.element)
}

_ToolManDragEvent.prototype = {
  toString : function() {
    return "mouse: " + this.mousePosition + this.mouseOffset + "    " +
        "xmouse: " + this.transformedMouseOffset + "    " +
        "left,top: " + this.topLeftPosition + this.topLeftOffset
  }
}

ToolMan._dragFactory._constraintFactory = {
  vertical : function() {
    return function(coordinate, dragEvent) {
      var x = dragEvent.topLeftOffset.x
      return coordinate.x != x
          ? coordinate.factory.create(x, coordinate.y) 
          : coordinate
    }
  },

  horizontal : function() {
    return function(coordinate, dragEvent) {
      var y = dragEvent.topLeftOffset.y
      return coordinate.y != y
          ? coordinate.factory.create(coordinate.x, y) 
          : coordinate
    }
  }
}

</script>
<!-- dragsort.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt) */

ToolMan._dragsortFactory = {
  makeSortable : function(item) {
    var group = ToolMan.drag().createSimpleGroup(item)

    group.register('dragstart', this._onDragStart)
    group.register('dragmove', this._onDragMove)
    group.register('dragend', this._onDragEnd)

    return group
  },

  /** 
   * Iterates over a list's items, making them sortable, applying
   * optional functions to each item.
   *
   * example: makeListSortable(myList, myFunc1, myFunc2, ... , myFuncN)
   */
  makeListSortable : function(list) {
    var helpers = ToolMan.helpers()
    var coordinates = ToolMan.coordinates()
    var items = list.getElementsByTagName("li")

    helpers.map(items, function(item) {
      var dragGroup = dragsort.makeSortable(item)
      dragGroup.setThreshold(4)
      var min, max
      dragGroup.addTransform(function(coordinate, dragEvent) {
        return coordinate.constrainTo(min, max)
      })
      dragGroup.register('dragstart', function() {
        var items = list.getElementsByTagName("li")
        min = max = coordinates.topLeftOffset(items[0])
        for (var i = 1, n = items.length; i < n; i++) {
          var offset = coordinates.topLeftOffset(items[i])
          min = min.min(offset)
          max = max.max(offset)
        }
      })
    })
    for (var i = 1, n = arguments.length; i < n; i++)
      helpers.map(items, arguments[i])
  },

  _onDragStart : function(dragEvent) {
  },

  _onDragMove : function(dragEvent) {
    var helpers = ToolMan.helpers()
    var coordinates = ToolMan.coordinates()

    var item = dragEvent.group.element
    var xmouse = dragEvent.transformedMouseOffset
    var moveTo = null

    var previous = helpers.previousItem(item, item.nodeName)
    while (previous != null) {
      var bottomRight = coordinates.bottomRightOffset(previous)
      if (xmouse.y <= bottomRight.y && xmouse.x <= bottomRight.x) {
        moveTo = previous
      }
      previous = helpers.previousItem(previous, item.nodeName)
    }
    if (moveTo != null) {
      helpers.moveBefore(item, moveTo)
      return
    }

    var next = helpers.nextItem(item, item.nodeName)
    while (next != null) {
      var topLeft = coordinates.topLeftOffset(next)
      if (topLeft.y <= xmouse.y && topLeft.x <= xmouse.x) {
        moveTo = next
      }
      next = helpers.nextItem(next, item.nodeName)
    }
    if (moveTo != null) {
      helpers.moveBefore(item, helpers.nextItem(moveTo, item.nodeName))
      return
    }
  },

  _onDragEnd : function(dragEvent) {
    ToolMan.coordinates().create(0, 0).reposition(dragEvent.group.element)
  }
}

</script>
<!-- cookies.js -->
<script language="JavaScript" type="text/javascript">
/* Copyright (c) 2005 Tim Taylor Consulting (see LICENSE.txt)

based on http://www.quirksmode.org/js/cookies.html
*/

ToolMan._cookieOven = {

  set : function(name, value, expirationInDays) {
    if (expirationInDays) {
      var date = new Date()
      date.setTime(date.getTime() + (expirationInDays * 24 * 60 * 60 * 1000))
      var expires = "; expires=" + date.toGMTString()
    } else {
      var expires = ""
    }
    document.cookie = name + "=" + value + expires + "; path=/"
  },

  get : function(name) {
    var namePattern = name + "="
    var cookies = document.cookie.split(';')
    for(var i = 0, n = cookies.length; i < n; i++) {
      var c = cookies[i]
      while (c.charAt(0) == ' ') c = c.substring(1, c.length)
      if (c.indexOf(namePattern) == 0)
        return c.substring(namePattern.length, c.length)
    }
    return null
  },

  eraseCookie : function(name) {
    createCookie(name, "", -1)
  }
}

</script>

<script language="JavaScript" type="text/javascript"><!--
  var dragsort = ToolMan.dragsort()
  var junkdrawer = ToolMan.junkdrawer()

  window.onload = function() {
    junkdrawer.restoreListOrder("numeric")
    junkdrawer.restoreListOrder("phonetic1")
    junkdrawer.restoreListOrder("phonetic2")
    junkdrawer.restoreListOrder("phonetic3")
    junkdrawer.restoreListOrder("phoneticlong")
    junkdrawer.restoreListOrder("boxes")
    junkdrawer.restoreListOrder("buttons")
    //junkdrawer.restoreListOrder("twolists1")
    //junkdrawer.restoreListOrder("twolists2")

    dragsort.makeListSortable(document.getElementById("numeric"),
        verticalOnly, saveOrder)

    dragsort.makeListSortable(document.getElementById("phonetic1"),
        verticalOnly, saveOrder)
    dragsort.makeListSortable(document.getElementById("phonetic2"),
        verticalOnly, saveOrder)
    dragsort.makeListSortable(document.getElementById("phonetic3"),
        verticalOnly, saveOrder)
    dragsort.makeListSortable(document.getElementById("phoneticlong"),
        verticalOnly, saveOrder)

    dragsort.makeListSortable(document.getElementById("boxes"),
        saveOrder)

    dragsort.makeListSortable(document.getElementById("buttons"),
        saveOrder)

    /*
    dragsort.makeListSortable(document.getElementById("twolists1"),
        saveOrder)
    dragsort.makeListSortable(document.getElementById("twolists2"),
        saveOrder)
    */
  }

  function verticalOnly(item) {
    item.toolManDragGroup.verticalOnly()
  }

  function speak(id, what) {
    var element = document.getElementById(id);
    element.innerHTML = 'Clicked ' + what;
  }

  function saveOrder(item) {
    var group = item.toolManDragGroup
    var list = group.element.parentNode
    var id = list.getAttribute("id")
    if (id == null) return
    group.register('dragend', function() {
      ToolMan.cookies().set("list-" + id, 
          junkdrawer.serializeList(list), 365)
    })
  }

  //-->
</script></head>


<body>

<h1>Drag &amp; Drop Sortable Lists with JavaScript and CSS</h1>


<b>rearrange the items</b>:</p>

<ul id="numeric">
  <li style="position: relative;" itemid="1">one</li>
  <li style="position: relative;" itemid="2">two</li>
  <li style="position: relative;" itemid="3">three</li>
</ul>

<div class="sidebar">
<p>Click an <input class="inspector" value="Inspect" onclick="junkdrawer.inspectListOrder('numeric')" style="margin: 0px; padding: 0px; font-size: 11px;" type="button">
button to reveal the serialized version of the associated list.</p>
</div>

<p>In Firefox you can also drag the <i>bullet</i> to move an item.  Keen.</p>

<p><b>Saving the reorderd list</b> is possible by inspecting the DOM.  All
the sortable lists on this page retain their order via cookies (try 
rearranging a list and then reloading the page).  Read a
<a href="http://blog.tool-man.org/saving-a-reordered-list/14">description of the technique</a> on my blog.
</p>

<h2>Example: Add Some Style</h2>

<div class="sidebar">
<p>Firefox exhibits a quirky bug on this example.  If the list items
have a bottom margin, all following content pops down a few pixels when
you start dragging the item.  No such problem when the item has a top
margin so a workaround is possible.</p>
</div>

<p>I added some styling and cursor hinting in an attempt to make
the dragability more obvious (see 
<a href="http://tool-man.org/examples/edit-in-place.html">in-place editing</a> for an example
with drag handles).</p>

<table id="phonetics">
  <tbody><tr>
    <td>
      <ul id="phonetic1" class="boxy">
        <li style="position: relative;">alpha</li>
        <li style="position: relative;">bravo</li>
        <li style="position: relative;">charlie</li>
      </ul>
    </td>
    <td>
      <ul id="phonetic2" class="boxy">
        <li style="position: relative;">alpha</li>
        <li style="position: relative;">bravo</li>
        <li style="position: relative;">charlie</li>
      </ul>
    </td>
    <td>
      <ul id="phonetic3" class="boxy">
        
        
        
      <li style="position: relative;">bravo</li><li style="position: relative;">alpha</li><li style="position: relative;">charlie</li></ul>
    </td>
  </tr>
  <tr>
    <td class="caption">no margin on list items</td>
    <td class="caption">4px bottom margin on list items.  Firefox exhibits 
    bug when dragging.</td>
    <td class="caption">Firefox workaround: -4px top margin on list, 4px
    top margin on list items.</td>
  </tr>
</tbody></table>

<p style="margin-top: 2em;">This next list is intentionally long to see how well the technique 
scales up and uncover other interaction issues.</p>

<!-- yeah, it's invalid XHTML.  Suck it up, pedant-boy :) -->
<ul id="phoneticlong" class="boxy">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
<li style="position: relative;" itemid="a">alpha</li><li style="position: relative;" itemid="b">bravo</li><li style="position: relative;" itemid="c">charlie</li><li style="position: relative;" itemid="d">delta</li><li style="position: relative;" itemid="e">echo</li><li style="position: relative;" itemid="f">foxtrot</li><li style="position: relative;" itemid="g">golf</li><li style="position: relative;" itemid="h">hotel</li><li style="position: relative;" itemid="i">india</li><li style="position: relative;" itemid="j">juliet</li><li style="position: relative;" itemid="k">kilo</li><li style="position: relative;" itemid="l">lima</li><li style="position: relative;" itemid="m">mike</li><li style="position: relative;" itemid="n">november</li><li style="position: relative;" itemid="o">oscar</li><li style="position: relative;" itemid="p">papa</li><li style="position: relative;" itemid="q">quebec</li><li style="position: relative;" itemid="r">romeo</li><li style="position: relative;" itemid="s">sierra</li><li style="position: relative;" itemid="y">yankee</li><li style="position: relative;" itemid="t">tango</li><li style="position: relative;" itemid="u">uniform</li><li style="position: relative;" itemid="v">victor</li><li style="position: relative;" itemid="w">whiskey</li><li style="position: relative;" itemid="x">xray</li><li style="position: relative;" itemid="z">zulu</li></ul>

<p><input class="inspector" value="Inspect" onclick="junkdrawer.inspectListOrder('phoneticlong')" type="button"></p>

<p>You'll notice if part of this list is below the fold, it requires
at least 2 drags to move an item from the beginning to the end (technically
3 drags if you count the one on your browser's scrollbar).  Automatic 
scrolling, like in Word or Excel, is a well established solution to this 
problem.  Adding that is a work in progress.</p>


<h2>Example: Sorting in two dimensions</h2>

<div class="sidebar">
<p>Yet another bizarre bug in firefox.  The short version:
use a DIV instead of a BR to clear the <code>float: left</code>
else things won&#8217;t remain as you expect them once you start 
dragging.</p>
</div>

<p>With sorting vertically oriented items under our belt, onto
the next challenge: sorting floated, wrapped list items.  Earlier 
versions of my code had separate scripts for vertical, horizontal, and 
wrapped lists.  Now they are unified into one script that <i>does it all</i>.
Amazing!</p>

<ul id="boxes">  
  
<li class="box">A</li><li class="box">B</li><li class="box">C</li><li class="box">D</li><li class="box">E</li><li class="box">F</li><li class="box">G</li><li class="box">H</li><li class="box">I</li><li class="box">J</li><li class="box">K</li><li class="box">L</li><li class="box">M</li><li class="box">O</li><li class="box">P</li><li class="box">Q</li><li class="box">R</li><li class="box">S</li><li class="box">T</li><li class="box">U</li><li class="box">V</li><li class="box">W</li><li class="box">X</li><li class="box">Y</li><li class="box">Z</li><li class="box">N</li></ul>

<div style="clear: left;"><br></div>

<p><input class="inspector" value="Inspect" onclick="junkdrawer.inspectListOrder('boxes')" type="button"></p>

<p>A previous version determined when to swap based on the position of the
top-left corner of the item being dragged.  It was this example and the 
<a href="http://tool-man.org/examples/edit-in-place.html#slideshow-example">slide arranger</a>
example which illustrated that the better interaction is to base this on
the position of the cursor, which is how the script works now.</p>

<h2>Example: Sortable links or buttons</h2>

<div class="sidebar">
<p>Firefox and Safari still generate a 'click' event even after performing
a drag.  This can be overcome with more JavaScript.</p>
</div>

<div class="sidebar">
<p>IE isn't rendering the link elements with <code>display: block</code>.
So only the link text is clickable.</p>
</div>

<p>Sortable items containing links.  Links are 'display: block' so the entire
item is clickable (except this isn't so in IE).  As buttons go these aren't very good; they lack
button affordances and behavior.  But I think you get the general idea.</p>

<div id="buttonsStatus" class="statusbox" style="position: relative; left: 11em;">&nbsp;</div>
<ul id="buttons" class="sortable boxy clickable">
  <li itemid="Save"><a href="#" onclick="speak('buttonsStatus', this.innerHTML); return false;">Save</a></li>
  <li itemid="Cancel"><a href="#" onclick="speak('buttonsStatus', this.innerHTML); return false;">Cancel</a></li>
  <li itemid="Preview"><a href="#" onclick="speak('buttonsStatus', this.innerHTML); return false;">Preview</a></li>
  <li itemid="Print"><a href="#" onclick="speak('buttonsStatus', this.innerHTML); return false;">Print</a></li>
</ul>
<br>


</body></html>

           
       








sorting_files.zip( 12 k)

Related examples in the same category

1.DynAPI Examples - Drag Drop /w Collision Detection
2.Display Drag Icon in drag and drop
3.Drag Over Event: Drag and Drop the file over recycle bins
4.Yahoo! UI Library - Drag and Drop 1
5.Yahoo! UI Library - Drag and Drop 2
6.Yahoo! UI Library - Drag and Drop 3
7.Yahoo! UI Library - Drag and Drop 5
8.Dragged object is on top
9.Drag and Drop - DDProxy
10.Yahoo! UI Library - Drag and Drop: Resize
11.Drag and Drop: Multiple groups, targetable affordance
12.Drag and Drop to sort slides
13.Drag and Drop to sort lists
14.Drag inside and outside a range
15.Drag still
16.Crop an image
17.Drag and drop custom window with title bar
18.Dragable float window with scrollable text inside
19.Dragable transparent window
20.Drag within a range 2
21.Dragable and sortable toolbar