代码片段： javascript 的slider

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;
    }

}