Drag and Drop to sort lists : Drag Drop : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Drag Drop »

 

Drag and Drop to sort lists



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html><head><!-- Copyright (c2005 Tim Taylor Consulting (see LICENSE.txt--><title>Edit in Place with JavaScript and CSS</title>

<!-- common.css -->
<STYLE rel="stylesheet" type="text/css">
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; }
{
  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;
}
text-decoration: none; }
a:hover text-decoration: underline; }
a:active background-color: #ffd700; }

</STYLE>

<!-- lists.css -->
<style rel="stylesheet" type="text/css">
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"><!--
/* TODO: this CSS is in need of major cleanup */
.slideshow {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.slide {
  position: relative;
  float: left;
  width: 172px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.slide div.thumb {
  background: #fff;
  width: 170px;
  height: 120px;
  border: 1px solid #000;
  font-size: 5px;
  font-family: "Times New Roman", serif;
  overflow: hidden;
}

.slide .view {
  padding: 2px 2px;
  margin: 2px 0px;
  cursor: text;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  background-color: #eee;
  height: 1em;
}
.view:hover {
  background-color: #ffffcc;
}
.view, .inplace, #list5 input {
  font-size: 14px;
  font-family: sans-serif;
}

.inplace {
  position: absolute;
  visibility: hidden;
  z-index: 10000;
}
.inplace, #list5 input:hover, #list5 input:focus {
  background-color: #ffffcc;
}
#slideEditors input.inplace {
  width: 12em;
  max-width: 12em;
  margin-left: 1px;
}
#slideEditors input.inplace, #slideshow .view {
  text-align: center;
}

#paragraphView, #paragraphEdit, #markupView, #markupEdit {
  font-family: "Times New Roman", serif;
  font-size: 14px;
}
#paragraphView, #markupView {
  border: 1px solid #fff;
  padding: 8px;
  width: 400px;
  max-width: 400px;
}
#paragraphView:hover, #markupView:hover {
  background-color: #ffffcc;
  border-color: #ccc;
}
#paragraphEdit, #markupEdit {
  width: 315px;
  background-color: #ffffcc;
}
#paragraphEdit {
  height: 5em;
}
#markupEdit {
  height: 15em;
}

#listExamples td {
  width: 9em;
  margin-right: 20px; 
  padding: 0px 20px;
  vertical-align: top;
}
#listExamples th {
  vertical-align: bottom;
  font-weight: normal;
  font-size: 14px;
  padding-top: 20px;
}
#listExamples td.caption {
  font-size: 12px;
  text-align: center;
}
#listExamples li {
  padding: 0px;
  height: 20px;
  min-height: 1em;
  width: 120px;
}
#listExamples li .view {
  height: 16px;
  vertical-align: middle;
  padding: 2px;
}
#list1 li:hover {
  background-color: #eee;
}
#listExamples input.inplace {
  width: 120px;
  max-width: 120px;
}

/* BugFix: Firefox: avoid bottom margin on draggable elements */
#listExamples #list4, #listExamples #list5 margin-top: -2px; }
#listExamples #list4 li, #listExamples #list5 li margin-top: 4px; }

#listExamples #list4 li cursor: default}
#listExamples #list4 .handle,
#listExamples #list5 .handle {
  float: right;
  background-color: #ccc;
  background-image: url(common/handle.png);
  background-repeat: repeat-y;
  width: 7px;
  height: 20px;
}
#listExamples #list4 li .view {
  cursor: text;
}
#listExamples #list4Editors input.inplace, #listExamples #list5 input {
  width: 104px;
  max-width: 104px;
}
#listExamples #list4Editors>input.inplace, #listExamples #list5>li>input {
  width: 111px;
  max-width: 111px;
}
#list5 input {
  background-color: #eee;
}
.inplace, #list5 input {
  margin: 0px;
  padding-left: 1px;
}
.handle {
  cursor: move;
}
--></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._eventsFactorythrow "ToolMan Events module isn't loaded";
    return ToolMan._eventsFactory
  },

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

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

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

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

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

  cookies : function() {
    if (!ToolMan._cookieOventhrow "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 == nullreturn
    var next = item.nextSibling
    while (next != null) {
      if (next.nodeName == nodeNamereturn next
      next = next.nextSibling
    }
    return null
  },

  previousItem : function(item, nodeName) {
    var previous = item.previousSibling
    while (previous != null) {
      if (previous.nodeName == nodeNamereturn 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 == nullreturn

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

    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 > 0return identifier;
    
    identifier = trim(item.getAttribute("itemID"))
    if (identifier != null && identifier.length > 0return 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 == nullreturn 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 (!eventevent = window.event

    if (event.target) {
      if (event.target.nodeType == 3event.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._listenerselement._listeners = new Array()
      if (!element._listeners[type]) element._listeners[typenew 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(00)
  },

  /*
   * 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: left
    var top = parseInt(ToolMan.css().readStyle(element, "top"))
    var top = isNaN(top: 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(00)
    }
  },

  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(00)
    }
  },

  /**
   * 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 >= || event.pageX < 0) {
      return this.create(event.pageX, event.pageY)
    else if (event.clientX >= || 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: x
  this.y = isNaN(y: 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 (!groupreturn
    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._thresholdDistancereturn
      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 != || 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(00).reposition(dragEvent.group.element)
  }
}

</script>

<script language="JavaScript"><!--
var ESCAPE = 27
var ENTER = 13
var TAB = 9

var coordinates = ToolMan.coordinates()
var dragsort = ToolMan.dragsort()

window.onload = function() {

  // TODO: this API sucks
  join("paragraph"true)
  join("markup"true)

  join("a2"true)
  join("b2"true)
  join("c2"true)
  join("d2"true)
  join("e2"true)

  join("a3")
  join("b3")
  join("c3")
  join("d3")
  join("e3")

  join("a4")
  join("b4")
  join("c4")
  join("d4")
  join("e4")

  join("one")
  join("two")
  join("three")
  join("four")
  join("five")
  join("six")

  dragsort.makeListSortable(document.getElementById("list1"))
  dragsort.makeListSortable(document.getElementById("list2"))
  dragsort.makeListSortable(document.getElementById("list3"))
  dragsort.makeListSortable(document.getElementById("list4"), setHandle)
  dragsort.makeListSortable(document.getElementById("list5"), setHandle)
  dragsort.makeListSortable(document.getElementById("slideshow"), setHandle)
}

function setHandle(item) {
  item.toolManDragGroup.setHandle(findHandle(item))
}

function findHandle(item) {
  var children = item.getElementsByTagName("div")
  for (var i = 0; i < children.length; i++) {
    var child = children[i]

    if (child.getAttribute("class"== nullcontinue

    if (child.getAttribute("class").indexOf("handle">= 0)
      return child
  }
  return item
}

function join(name, isDoubleClick) {
  var view = document.getElementById(name + "View")
  view.editor = document.getElementById(name + "Edit")

  var showEditor = function(event) {
    event = fixEvent(event)

    var view = this
    var editor = view.editor

    if (!editorreturn true

    if (editor.currentView != null) {
      editor.blur()
    }
    editor.currentView = view

    var topLeft = coordinates.topLeftOffset(view)
    topLeft.reposition(editor)
    if (editor.nodeName == 'TEXTAREA') {
      editor.style['width'] = view.offsetWidth + "px"
      editor.style['height'] = view.offsetHeight + "px"
    }
    editor.value = view.innerHTML
    editor.style['visibility'] 'visible'
    view.style['visibility'] 'hidden'
    editor.focus()
    return false
  }

  if (isDoubleClick) {
    view.ondblclick = showEditor
  else {
    view.onclick = showEditor
  }

  view.editor.onblur = function(event) {
    event = fixEvent(event)

    var editor = event.target
    var view = editor.currentView

    if (!editor.abandonChangesview.innerHTML = editor.value
    editor.abandonChanges = false
    editor.style['visibility'] 'hidden'
    editor.value = '' // fixes firefox 1.0 bug
    view.style['visibility'] 'visible'
    editor.currentView = null

    return true
  }
  
  view.editor.onkeydown = function(event) {
    event = fixEvent(event)
    
    var editor = event.target
    if (event.keyCode == TAB) {
      editor.blur()
      return false
    }
  }

  view.editor.onkeyup = function(event) {
    event = fixEvent(event)

    var editor = event.target
    if (event.keyCode == ESCAPE) {
      editor.abandonChanges = true
      editor.blur()
      return false
    else if (event.keyCode == TAB) {
      return false
    else {
      return true
    }
  }

  // TODO: this method is duplicated elsewhere
  function fixEvent(event) {
    if (!eventevent = window.event
    if (event.target) {
      if (event.target.nodeType == 3event.target = event.target.parentNode
    else if (event.srcElement) {
      event.target = event.srcElement
    }

    return event
  }
}
//-->
</script></head>


<body>

<h1>Edit in Place with JavaScript and CSS</h1>
<br class="clear">


<div class="sidebar">
  <p>.</p>
</div>


<h2>Editable Content</h2>

<p id="paragraphView">Editable #1: Double-click anywhere in this
paragraph to edit its content. Press TAB or click outside the edit area
to finish. Press ESCAPE to cancel.</p>

<textarea id="paragraphEdit" class="inplace" tabindex="1"></textarea>



<div id="markupView">
<p>Editable #2: This can work on arbitrary markup.  This may or may not be such a good idea.</p>

<p>We can do paragraphs, <b>styling</b>, <a href="http://tool-man.org/examples/index.html">links</a>, 
or any HTML, really.</p>

<table style="text-align: center;" cellpadding="3" cellspacing="0">
  <tbody><tr>
    <td></td>
    <th style="border-bottom: 1px solid;">DADA</th>
    <th style="border-bottom: 1px solid;">NHUG</th>
    <th style="border-bottom: 1px solid;">TTAY</th>
  </tr>
  <tr>
    <th style="border-right: 1px solid;">DADA</th>
    <td style="background-color: rgb(204, 204, 204);"></td>
    <td>1</td>
    <td>3</td>
  </tr>
  <tr>
    <th style="border-right: 1px solid;">NHUG</th>
    <td>1</td>
    <td style="background-color: rgb(204, 204, 204);"></td>
    <td>2</td>
  </tr>
  <tr>
    <th style="border-right: 1px solid;">TTAY</th>
    <td>3</td>
    <td>2</td>
    <td style="background-color: rgb(204, 204, 204);"></td>
  </tr>
</tbody></table>


<br>

<p>Without applying some kind of limitation, any markup whatsoever can be 
entered.  In practice you would normally want to limit the type of markup 
allowed perhaps via a <a href="http://tinymce.moxiecode.com/">wysiwyg editor</a>
or a text formatter like <a href="http://daringfireball.net/projects/markdown/">Markdown</a>.
</p>
</div>
<textarea id="markupEdit" class="inplace" tabindex="2"></textarea>

<h2>Sortable, Editable Lists</h2>

<div class="sidebar">
<p>Firefox and Safari register 'click' events after a drag causing the
field to become editable, which is undesirable.  This is the same
problem with the sortable links and buttons example in
<a href="http://tool-man.org/examples/sorting.html">DnD Sortable Lists</a>.</p>
</div>

<p>Combining in place editing with 
<a href="http://tool-man.org/examples/sorting.html">Drag &amp; Drop Sortable Lists</a> results in
nice direct manipulation for managing a list of labels.</p>

<table id="listExamples">
  <tbody><tr>
    <th>List 1</th>
    <th>List 2</th>
    <th>List 3</th>
  </tr>
  <tr>
    <td>
      <ul id="list1" class="sortable boxy">
        <li class="view">alpha</li>
        <li class="view">bravo</li>
        <li class="view">charlie</li>
        <li class="view">delta</li>
        <li class="view">echo</li>
      </ul>
    </td>
    <td>
      <!-- 
      IE 5.5+ BugFix: don't put these inside a 
      'position: relative' layer
      -->
      <input id="a2Edit" name="a2Edit" class="inplace">
      <input id="b2Edit" name="b2Edit" class="inplace">
      <input id="c2Edit" name="c2Edit" class="inplace">
      <input id="d2Edit" name="d2Edit" class="inplace">
      <input id="e2Edit" name="e2Edit" class="inplace">
      <ul id="list2" class="sortable boxy">
        <li>
          <div id="a2View" class="view">alpha</div>
        </li>
        <li>
          <div id="b2View" class="view">bravo</div>
        </li>
        <li>
          <div id="c2View" class="view">charlie</div>
        </li>
        <li>
          <div id="d2View" class="view">delta</div>
        </li>
        <li>
          <div id="e2View" class="view">echo</div>
        </li>
      </ul>
    </td>
    <td>
      <!-- 
      IE 5.5+ BugFix: don't put these inside a 
      'position: relative' layer
      -->
      <input style="top: 825px; left: 386px; visibility: visible;" id="a3Edit" name="a3Edit" class="inplace">
      <input id="b3Edit" name="b3Edit" class="inplace">
      <input id="c3Edit" name="c3Edit" class="inplace">
      <input id="d3Edit" name="d3Edit" class="inplace">
      <input id="e3Edit" name="e3Edit" class="inplace">
      <ul id="list3" class="sortable boxy">
        
        <li>
          <div id="b3View" class="view">bravo</div>
        </li>
        <li>
          <div id="c3View" class="view">charlie</div>
        </li>
        <li>
          <div id="d3View" class="view">delta</div>
        </li>
        <li style="opacity: 1; z-index: auto; top: 0px; left: 0px;">
          <div style="visibility: hidden;" id="a3View" class="view">alpha</div>
        </li><li>
          <div id="e3View" class="view">echo</div>
        </li>
      </ul>
    </td>
  </tr>
  <tr>
    <td class="caption">Sort only</td>
    <td class="caption">Sort and edit (double click)</td>
    <td class="caption">Sort and edit (single click)</td>
  </tr>
  <tr>
    <th>List 4</th>
    <th>List 5</th>
    <th></th>
  </tr>
  <tr>
    <td>
      <div id="list4Editors">
        <input id="a4Edit" name="a4Edit" class="inplace" tabindex="10">
        <input id="b4Edit" name="b4Edit" class="inplace" tabindex="10">
        <input id="c4Edit" name="c4Edit" class="inplace" tabindex="10">
        <input id="d4Edit" name="d4Edit" class="inplace" tabindex="10">
        <input id="e4Edit" name="e4Edit" class="inplace" tabindex="10">
      </div>
      <ul id="list4" class="sortable boxy">
        <li>
          <div class="handle"></div>
          <div id="a4View" class="view">alpha</div>
        </li>
        <li>
          <div class="handle"></div>
          <div id="b4View" class="view">bravo</div>
        </li>
        <li>
          <div class="handle"></div>
          <div id="c4View" class="view">charlie</div>
        </li>
        <li>
          <div class="handle"></div>
          <div id="d4View" class="view">delta</div>
        </li>
        <li>
          <div class="handle"></div>
          <div id="e4View" class="view">echo</div>
        </li>
      </ul>
    </td>
    <td>
      <ul id="list5" class="sortable boxy">
        <li>
          <div class="handle"></div>
          <input id="a5Edit" name="a5Edit" value="alpha">
        </li>
        <li>
          <div class="handle"></div>
          <input id="b5Edit" name="b5Edit" value="bravo">
        </li>
        <li>
          <div class="handle"></div>
          <input id="c5Edit" name="c5Edit" value="charlie">
        </li>
        <li>
          <div class="handle"></div>
          <input id="d5Edit" name="d5Edit" value="delta">
        </li>
        <li>
          <div class="handle"></div>
          <input id="e5Edit" name="e5Edit" value="echo">
        </li>
      </ul>
    </td>
  </tr>
  <tr>
    <td class="caption">Drag handles</td>
    <td class="caption">Always editable</td>
    <td class="caption"></td>
  </tr>
</tbody></table>

<br>

<a name="slideshow-example"></a>
<table><tbody><tr><td>
<div id="slideEditors">
  <!-- 
  IE 5.5+ BugFix: don't put these inside a 'position: relative' layer
  -->
  <input id="oneEdit" name="oneEdit" class="inplace">
  <input id="twoEdit" name="oneEdit" class="inplace">
  <input id="threeEdit" name="oneEdit" class="inplace">
  <input id="fourEdit" name="oneEdit" class="inplace">
  <input id="fiveEdit" name="oneEdit" class="inplace">
  <input id="sixEdit" name="oneEdit" class="inplace">
</div>
<ul id="slideshow" class="slideshow">
  <li class="slide">
    <div class="thumb handle"><img src="dragableSlide1.png"></div>
    <div id="oneView" class="view">Slide 1</div>
  </li>

  <li class="slide">
    <div class="thumb handle"><img src="dragableSlide2.png"></div>
    <div id="twoView" class="view">Slide 2</div>
  </li>

  <li class="slide">
    <div class="thumb handle"><img src="dragableSlide3.png"></div>
    <div id="threeView" class="view">Slide 3</div>
  </li>

  <li class="slide">
    <div class="thumb handle"><img src="dragableSlide4.png"></div>
    <div id="fourView" class="view">Slide 4</div>
  </li>

  <li class="slide">
    <div class="thumb handle"><img src="dragableSlide5.png"></div>
    <div id="fiveView" class="view">Slide 5</div>
  </li>

  <li class="slide">
    <div class="thumb handle"><img src="dragableSlide6.png"></div>
    <div id="sixView" class="view">Slide 6</div>
  </li>
</ul>
</td></tr></tbody></table>

<br style="clear: both;">

  <div id="copyright">Copyright 2005 Tim Taylor Consulting
  (<a href="http://tool-man.org/examples/LICENSE.txt">license</a>)</div>
</body></html>

           
       

Download : Download nav_edit-in-place_files.zip nav_edit-in-place_files.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Drag Drop