function Draggable(element)
...
{ // initialize drag variable var x = 0 , y = 0 , oldMouseMove, oldMouseUp; this .test = 123 ; // get style properties of element var computedStyle; if ( typeof document.defaultView != " undefined " && typeof document.defaultView.getComputedStyle != " undefined " ) computedStyle = document.defaultView.getComputedStyle(element, "" ); else if ( typeof element.currentStyle != " undefined " ) computedStyle = element.currentStyle; else computedStyle = element.style; // prep element for dragging if (computedStyle.position == " static " || computedStyle.position == "" ) element.style.position = " relative " ; if (computedStyle.zIndex == " auto " || computedStyle.zIndex == "" ) element.style.zIndex = 1 ; element.style.left = isNaN(parseInt(computedStyle.left)) ? " 0 " : computedStyle.left; element.style.top = isNaN(parseInt(computedStyle.top )) ? " 0 " : computedStyle.top; // default event listeners function onstart( event ) ... { event .dragTarget = element; x = event .clientX; y = event .clientY; // Override preventDefault event .preventDefault = (function(original) ... { return function() ... { element.ownerDocument.onmousemove = oldMouseMove; element.ownerDocument.onmouseup = oldMouseUp; original.call( event ); } })( event .preventDefault || function() ... {} ); if (element.onstart) element.onstart( event ); } function ondrag(event , draggableObj) ... { event .dragTarget = element; var elemLeft = parseInt(element.style.left) + event .clientX - x; if (draggableObj.minLeft) ... { if (elemLeft < draggableObj.minLeft) ... { elemLeft = draggableObj.minLeft; } } if (draggableObj.maxLeft) ... { if (elemLeft > draggableObj.maxLeft) ... { elemLeft = draggableObj.maxLeft; } } element.style.left = elemLeft + " px " ; // element.style.top = parseInt(element.style.top) + event.clientY - y + "px"; x = event .clientX; y = event .clientY; Droppable.query( event ); if (element.ondrag) element.ondrag( event ); } function onstop(event ) ... { event .dragTarget = element; Droppable.query( event ); if (element.onstop) element.onstop( event ); } // make listeners active element.onmousedown = (function(oldMouseDown, draggableObj) ... { return function() ... { // Call old listener if (oldMouseDown) oldMouseDown.apply( this , arguments); // Store old event handlers oldMouseMove = this .ownerDocument.onmousemove; oldMouseUp = this .ownerDocument.onmouseup; // Setup events this .ownerDocument.onmousemove = function() ... { // Call old listener // if (oldMouseMove) oldMouseMove.apply(this, arguments); // Call ondrag ondrag.call(element, arguments[ 0 ] || event , draggableObj); return false ; } this .ownerDocument.onmouseup = function() ... { // Call old listener // if (oldMouseUp) oldMouseUp.apply(this, arguments); // Call onstop onstop.call(element, arguments[ 0 ] || event ); // Restore old event listeners this .onmousemove = oldMouseMove; this .onmouseup = oldMouseUp; return false ; } // Call onstart onstart.call( this , arguments[ 0 ] || event ); return false ; } })(element.onmousedown, this ); // override event attachers if (element.addEventListener) element.addEventListener = (function(original) ... { return function( event , listener, useCapture) ... { switch ( event ) ... { case " start " : onstart = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onstart); break ; case " drag " : ondrag = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(ondrag); break ; case " stop " : onstop = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onstop); break ; default : original.call(element, event , listener, useCapture); } } })(element.addEventListener); if (element.attachEvent) element.attachEvent = (function(original) ... { return function( event , listener) ... { switch ( event ) ... { case " onstart " : onstart = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onstart); break ; case " ondrag " : ondrag = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(ondrag); break ; case " onstop " : onstop = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onstop); break ; default : original.call(element, event , listener); } } })(element.attachEvent); if (window.attachEvent) window.attachEvent( " onbeforeunload " , function() ... { onstart = ondrag = onstop = element.onmousedown = element.addEventListener = element.attachEvent = null ; element = null ; } ); }
//
initialize Droppable in the global scope
var Droppable; (function()
...
{ if (document.getBoxObjectFor) ... { function getOffset(element) ... { var box = document.getBoxObjectFor(element); return ... { x: box.x, y: box.y } ; } } else if (document.all && navigator.appName == " Microsoft Internet Explorer " && ! window.opera) ... { function getOffset(element) ... { var range = document.body.createTextRange(); range.moveToElementText(element); var rect = range.getBoundingClientRect(); return ... { x: rect.left, y: rect.top } ; } } else ... { function getOffset(element) ... { var accumulator = arguments[ 1 ] || ... { x: 0 , y: 0 } ; if (element && element != document.body) ... { accumulator.x += element.offsetLeft; accumulator.y += element.offsetTop; return getOffset(element.offsetParent, accumulator); } else ... { return accumulator; } } } // initialize private pointers to current target information var cTarget = null , cHover = null , cUnhover = null , cDrop = null ; function hotSpots(x,y) ... { cTarget = cHover = cUnhover = cDrop = null ; } // declare Droppable within the private scope Droppable = function(element) ... { // Calculate offset var offset = getOffset(element); // Calculate other edge offset var edge = ... { x: offset.x + element.offsetWidth, y: offset.y + element.offsetHeight } ; // Assign a finder function hotSpots = (function(old) ... { return function(x,y) ... { if (offset.x <= x && x <= edge.x && offset.y <= y && y <= edge.y) ... { cTarget = element; cHover = onhover; cUnhover = onunhover; cDrop = ondrop; } else ... { old(x,y); } } })(hotSpots); // default event listeners function onhover( event ) ... { event .dropTarget = element; if (element.onhover) element.onhover( event ); } function onunhover(event ) ... { event .dropTarget = element; if (element.onunhover) element.onunhover( event ); } function ondrop(event ) ... { event .dropTarget = element; if (element.ondrop) element.ondrop( event ); } // override event attachers if (element.addEventListener) element.addEventListener = (function(original) ... { return function( event , listener, useCapture) ... { switch ( event ) ... { case " hover " : onhover = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onhover); break ; case " unhover " : onunhover = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onunhover); break ; case " drop " : ondrop = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(ondrop); break ; default : original.call(element, event , listener, useCapture); } } })(element.addEventListener); if (element.attachEvent) element.attachEvent = (function(original) ... { return function( event , listener) ... { switch ( event ) ... { case " onhover " : onhover = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onhover); break ; case " onunhover " : onunhover = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(onunhover); break ; case " ondrop " : ondrop = (function(old) ... { return function( event ) ... { old.call(element, event ); listener.call(element, event ); } })(ondrop); break ; default : original.call(element, event , listener); } } })(element.attachEvent); if (window.attachEvent) window.attachEvent( " onbeforeunload " , function() ... { hotSpots = onhover = onunhover = ondrop = element.addEventListener = element.attachEvent = cTarget = cHover = cUnhover = cDrop = null ; element = null ; } ); } // Setup a query method Droppable.query = function( event ) ... { var oTarget = cTarget, oHover = cHover, oUnhover = cUnhover, oDrop = cDrop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft, scrollTop = document.documentElement.scrollTop || document.body.scrollTop; hotSpots( event .clientX + scrollLeft, event .clientY + scrollTop); switch ( event .type) ... { case " mousemove " : // onhover & onunhover if (oTarget != null && oTarget != cTarget) oUnhover.call(oTarget, event ); if (oTarget == null && cTarget != null ) cHover.call(cTarget, event ); break ; case " mouseup " : // ondrop if (cTarget != null ) ... { cUnhover.call(cTarget, event ); cDrop.call(cTarget, event ); } break ; } } Droppable.reset = function() ... { hotSpots = function(x,y) ... { cTarget = cHover = cUnhover = cDrop = null ; } hotSpots(); } }
)();
//
Fix the function prototype for IE5/Mac
if
(
typeof
Function.prototype.apply
==
"
undefined
"
) Function.prototype.apply
=
function(scope, args)
...
{ if ( ! args) args = []; var index = 0 , result; do ... { -- index } while ( typeof scope[index] != " undefined " ); scope[index] = this ; switch (args.length) ... { case 0 : result = scope[index](); break ; case 1 : result = scope[index](args[ 0 ]); break ; case 2 : result = scope[index](args[ 0 ], args[ 1 ]); break ; case 3 : result = scope[index](args[ 0 ], args[ 1 ], args[ 2 ]); break ; case 4 : result = scope[index](args[ 0 ], args[ 1 ], args[ 2 ], args[ 3 ]); break ; default : result = scope[index](args[ 0 ], args[ 1 ], args[ 2 ], args[ 3 ], args[ 4 ]); break ; } delete scope[index]; return result; }
if
(
typeof
Function.prototype.call
==
"
undefined
"
) Function.prototype.call
=
function(scope)
...
{ var args = new Array(Math.max(arguments.length - 1 , 0 )); for (var i = 1 ; i < arguments.length; i ++ ) args[i - 1 ] = arguments[i]; return this .apply(scope, args); }
function DoubleSlider(contain, minValue, maxValue, points, initPoints)
...
{ this .minValue = minValue; this .maxValue = maxValue; this .lenPerStep = parseInt(contain.style.width) / (maxValue - minValue); this .lenPerStepHalf = this .lenPerStep / 2 ; this .points = points; this .pointsPos = new Array(); var nodes = contain.getElementsByTagName( " DIV " ); for (var i = 0 ; i < points.length; i ++ ) ... { this .pointsPos.push( this .lenPerStep * points[i]); nodes[ 3 ].innerHTML = nodes[ 3 ].innerHTML + " <span style='position:absolute;float:left;left: " + this .pointsPos[i] + " px;'><img src='slider_h_point.gif' border=0></span> " ; } this .spaceBetweenSlider = nodes[ 1 ]; nodes[ 0 ].style.left = this .pointsPos[ 0 ] - 5 + " px " ; nodes[ 2 ].style.left = this .pointsPos[points.length - 1 ] - 5 + " px " ; this .leftSlider = new Draggable(nodes[ 0 ]); this .rightSlider = new Draggable(nodes[ 2 ]); this .leftSlider.minLeft = this .pointsPos[ 0 ] - 5 ; this .rightSlider.minLeft = this .pointsPos[ 1 ] - 5 ; this .leftSlider.maxLeft = this .pointsPos[points.length - 2 ] - 5 ; this .rightSlider.maxLeft = this .pointsPos[points.length - 1 ] - 5 ; for (var i = 0 ; i < points.length; i ++ ) ... { if (points[i] == initPoints[ 0 ]) ... { nodes[ 0 ].style.left = this .pointsPos[i] - 5 + " px " ; this .rightSlider.minLeft = this .pointsPos[i + 1 ] - 5 ; } else if (points[i] == initPoints[ 1 ]) ... { nodes[ 2 ].style.left = this .pointsPos[i] - 5 + " px " ; this .leftSlider.maxLeft = this .pointsPos[i - 1 ] - 5 ; break ; } } this .spaceBetweenSlider.style.left = nodes[ 0 ].style.left; this .spaceBetweenSlider.style.width = parseInt(nodes[ 2 ].style.left) - parseInt(nodes[ 0 ].style.left) + " px " ; nodes[ 0 ].ondrag = nodes[ 2 ].ondrag = (function(nodes, doubleSlider) ... { return function() ... { doubleSlider.spaceBetweenSlider.style.left = nodes[ 0 ].style.left; doubleSlider.spaceBetweenSlider.style.width = parseInt(nodes[ 2 ].style.left) - parseInt(nodes[ 0 ].style.left) + " px " ; return false ; } })(nodes, this ); nodes[ 0 ].onstop = (function(nodes, doubleSlider) ... { return function() ... { var elemLeft = parseInt(nodes[ 0 ].style.left); for (var i = 0 ; i < doubleSlider.pointsPos.length - 1 ; i ++ ) ... { if (elemLeft < doubleSlider.pointsPos[i] + (doubleSlider.pointsPos[i + 1 ] - doubleSlider.pointsPos[i]) / 2 ) ... { nodes[ 0 ].style.left = doubleSlider.pointsPos[i] - 5 + " px " ; doubleSlider.rightSlider.minLeft = doubleSlider.pointsPos[i + 1 ] - 5 ; doubleSlider.spaceBetweenSlider.style.left = nodes[ 0 ].style.left; doubleSlider.spaceBetweenSlider.style.width = parseInt(nodes[ 2 ].style.left) - parseInt(nodes[ 0 ].style.left) + " px " ; break ; } } return false ; } })(nodes, this ); nodes[ 2 ].onstop = (function(nodes, doubleSlider) ... { return function() ... { var elemLeft = parseInt(nodes[ 2 ].style.left); for (var i = doubleSlider.pointsPos.length - 1 ; i > 0 ; i -- ) ... { if (elemLeft > doubleSlider.pointsPos[i] - (doubleSlider.pointsPos[i] - doubleSlider.pointsPos[i - 1 ]) / 2 ) ... { nodes[ 2 ].style.left = doubleSlider.pointsPos[i] - 5 + " px " ; doubleSlider.leftSlider.maxLeft = doubleSlider.pointsPos[i - 1 ] - 5 ; doubleSlider.spaceBetweenSlider.style.left = nodes[ 0 ].style.left; doubleSlider.spaceBetweenSlider.style.width = parseInt(nodes[ 2 ].style.left) - parseInt(nodes[ 0 ].style.left) + " px " ; break ; } } return false ; } })(nodes, this ); }
<
html
>
<
body
>
<
style
>
...
.ajax__slider_h_rail {...} { position : relative ; background : url("slider_h_rail.gif") repeat-x ; height : 22px ; } .ajax__slider_h_handle {...} { float : left ; position : absolute ; background : url("slider_h_handle.gif") no-repeat ; height : 22px ; width : 10px ; top : 0 ; } .ajax__slider_h_midSpace {...} { float : left ; position : absolute ; background : url("slider_h_midBg.gif") no-repeat ; top : 0 ; height : 22px ; } .ajax__slider_h_point {...} { float : left ; position : absolute ; background : url("slider_h_point.gif") no-repeat ; top : 0 ; }
</
style
>
<
script
type
="text/javascript"
src
="dragdrop.js"
></
script
>
<
form
name
="form1"
id
="form1"
>
<
div
style
="position:relative;"
>
<
div
class
="ajax__slider_h_rail"
id
="Slider1_railElement"
style
="width:250px;"
>
<
div
class
="ajax__slider_h_handle"
>
<
img
src
="slider_h_handle.gif"
/>
</
div
>
<
div
class
="ajax__slider_h_midSpace"
>
<
img
src
="slider_h_midBg.gif"
width
="1"
/>
</
div
>
<
div
class
="ajax__slider_h_handle"
>
<
img
src
="slider_h_handle.gif"
/>
</
div
>
<
div
>
</
div
>
</
div
>
</
div
>
<
div
id
="info"
></
div
>
<
script
language
="JavaScript"
type
="text/javascript"
>
...
window.onload = function () ... { var one = document.getElementById( " Slider1_railElement " ); DoubleSlider(one, 0 , 25 , [ 1 , 3 , 6 , 12 , 24 ], [ 1 , 12 ]); }
</
script
>
<
div
id
="one"
>
Drag something onto me
</
div
>
<
div
id
="two"
>
Drag me onto something
</
div
>
</
form
>
</
body
>
</
html
>
Some js CODE AutoFlex.prototype._getPropertyChangeHandler = function(){ var obj = this; return function (){ obj._onPropertyChange.call(obj); } }
/**/
/* * * * Crossbrowser Drag Handler * http://www.webtoolkit.info/ * * */
var
DragHandler
=
...
{ // private property. _oElem : null , // public method. Attach drag handler to an element. attach : function (oElem) ... { oElem.onmousedown = DragHandler._dragBegin; // callbacks oElem.dragBegin = new Function(); oElem.drag = new Function(); oElem.dragEnd = new Function(); return oElem; } , // private method. Begin drag process. _dragBegin : function (e) ... { var oElem = DragHandler._oElem = this ; if (isNaN(parseInt(oElem.style.left))) ... { oElem.style.left = ' 0px ' ; } if (isNaN(parseInt(oElem.style.top))) ... { oElem.style.top = ' 0px ' ; } var x = parseInt(oElem.style.left); var y = parseInt(oElem.style.top); e = e ? e : window.event; oElem.mouseX = e.clientX; oElem.mouseY = e.clientY; oElem.dragBegin(oElem, x, y); document.onmousemove = DragHandler._drag; document.onmouseup = DragHandler._dragEnd; return false ; } , // private method. Drag (move) element. _drag : function (e) ... { var oElem = DragHandler._oElem; var x = parseInt(oElem.style.left); var y = parseInt(oElem.style.top); e = e ? e : window.event; oElem.style.left = x + (e.clientX - oElem.mouseX) + ' px ' ; oElem.style.top = y + (e.clientY - oElem.mouseY) + ' px ' ; oElem.mouseX = e.clientX; oElem.mouseY = e.clientY; oElem.drag(oElem, x, y); return false ; } , // private method. Stop drag process. _dragEnd : function () ... { var oElem = DragHandler._oElem; var x = parseInt(oElem.style.left); var y = parseInt(oElem.style.top); oElem.dragEnd(oElem, x, y); document.onmousemove = null ; document.onmouseup = null ; DragHandler._oElem = null ; } }