Dragable transparent window : Drag Drop « GUI Components « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » GUI Components » Drag Drop 
Dragable transparent window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head><!-- Copyright (c2005 Tim Taylor Consulting (see LICENSE.txt-->

<title>Dragging with JavaScript</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>

<style type="text/css">
  div {
    margin: 0px;
    padding: 0px;
  }
  .verticalgridline {
    padding-top: 27px;
  }
  .box, .handle {
    font-size: 14px;
    font-family: Arial, sans-serif;
    border: 1px solid #aaa;
  }
  .box {
    float: left;
    padding: 0px;
    width: 123px;
    height: 123px;
    margin: 5px;
    background-color: #eee;
    z-index: 1;
  }
  .handle {
    cursor: move;
    height: 14px;
    border-width: 0px 0px 1px 0px;
    background: #666;
    color: #eee;
    padding: 2px 6px;
    margin: 0px;
  }
  .box p {
    font-size: 12px;
    margin: 5px 5px 10px 5px;
    text-align: left;
    white-space: normal;
  }
  #boxDrag, #boxVerticalOnly, #boxHorizontalOnly, #boxRegionConstraint, 
  #boxThreshold, #boxAbsolute {
    cursor: move;
  }
  #boxAbsolute {
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
</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>

<script language="JavaScript"><!--
window.onload = function() {
  var group
  var coordinates = ToolMan.coordinates()
  var drag = ToolMan.drag()

  var boxDrag = document.getElementById("boxDrag")
  drag.createSimpleGroup(boxDrag)

  var boxVerticalOnly = document.getElementById("boxVerticalOnly")
  group = drag.createSimpleGroup(boxVerticalOnly)
  group.verticalOnly()

  var boxHorizontalOnly = document.getElementById("boxHorizontalOnly")
  group = drag.createSimpleGroup(boxHorizontalOnly)
  group.horizontalOnly()

  var boxRegionConstraint = document.getElementById("boxRegionConstraint")
  group = drag.createSimpleGroup(boxRegionConstraint)
  var origin = coordinates.create(00)
  group.addTransform(function(coordinate, dragEvent) {
    var originalTopLeftOffset = 
        dragEvent.topLeftOffset.minus(dragEvent.topLeftPosition)
    return coordinate.constrainTo(origin, originalTopLeftOffset)
  })

  var boxThreshold = document.getElementById("boxThreshold")
  group = drag.createSimpleGroup(boxThreshold)
  group.setThreshold(25)

  var boxHandle = document.getElementById("boxHandle")
  group = drag.createSimpleGroup(boxHandle, document.getElementById("handle"))

  var boxAbsolute = document.getElementById("boxAbsolute")
  group = drag.createSimpleGroup(boxAbsolute)
  group.verticalOnly()
  group.addTransform(function(coordinate, dragEvent) {
    var scrollOffset = coordinates.scrollOffset()
    if (coordinate.y < scrollOffset.y)
      return coordinates.create(coordinate.x, scrollOffset.y)

    var clientHeight = coordinates.clientSize().y
    var boxHeight = coordinates._size(boxAbsolute).y
    if ((coordinate.y + boxHeight(scrollOffset.y + clientHeight))
      return coordinates.create(coordinate.x, 
          (scrollOffset.y + clientHeight- boxHeight)

    return coordinate
  })
}

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


<body>

<h1>Dragging with JavaScript</h1>
<div>
  <div style="position: relative;" id="boxDrag" class="box">
    <p>drag to move</p>
  </div>
  <div style="position: relative;" id="boxHandle" class="box">
    <div id="handle" class="handle">&nbsp;</div>
    <p>drag handle to move</p>
  </div>
  <div style="position: relative;" id="boxVerticalOnly" class="box">
    <p>drag to move</p>
    <p>vertical constraint</p>
  </div>
  <br style="clear: left;">
  <div style="position: relative;" id="boxHorizontalOnly" class="box">
    <p>drag to move</p>
    <p>horizontal constraint</p>
  </div>
  <div style="position: relative;" id="boxRegionConstraint" class="box">
    <p>drag to move</p>
    <p>contrained to region</p>
  </div>
  <div style="position: relative;" id="boxThreshold" class="box">
    <p>drag to move</p>
    <p>exaggerated drag threshold</p>
  </div>
</div>

<div style="top: 585px; left: 783px;" id="boxAbsolute" class="box">
  <p>drag to move</p>
  <p>absolutely positioned, constrained vertically and
  within visible area</p>
</div>

<div class="sidebar">
  <p><b>Update 4/26</b>: tested and working as expected in IE6, Firefox 1.0,
  and Safari 1.3, unless otherwise noted.</p>
  
  <p>Safari 1.2 leaves visual artifacts on the background while dragging.</p>
</div>

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



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

</body></html

           
       
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. Drag within a range 2
20. Dragable sorted list
21. Dragable and sortable toolbar
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.