图片拖拽与滑动接收数据

最新推荐文章于 2022-03-21 15:03:46 发布

pengsky2002

最新推荐文章于 2022-03-21 15:03:46 发布

阅读量1.5k

点赞数

文章标签： function iterator div object methods callback

本文链接：https://blog.csdn.net/pengsky2002/article/details/2176026

版权

功能大体如下

1.图片拖拽

2.文件夹滑动

3.文件夹接收图片数据

第一个文件 dragdroptest.jsp

<% @page pageEncoding = " UTF-8 " contentType = " text/html; charset=UTF-8 " %>

< html >

< head >

< meta http - equiv = " Content-Type " content = " text/html; charset=utf-8 " />

< title > 照片拖拽 </ title >

< link href = " css/dragdrop.css " type = " text/css " rel = " stylesheet " />

< script src = " js/dragdrop.js " type = " text/javascript " ></ script >

< script src = " js/prototype.js " type = " text/javascript " ></ script >

< script src = " js/slider.js " type = " text/javascript " ></ script >

</ head >

< body >

< div class = " photocontent " >

< div class = " clear " >

照片拖拽

</ div >

< div class = " photoleft " >

< div class = " albumList " >

< div class = " iformation " >

< span class = " span1 " > 当前相册 </ span >& nbsp; & nbsp; & nbsp; < span class = " span2 " > 6 </ span >& nbsp;张

</ div >

< div class = " userAlbum " id = " photo_1 " >

< table width = " 150 " height = " 100% " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >

< tr >

< td align = " center " valign = " bottom " height = " 140 " >

< div id = " 1_2 " class = " userPhoto " style = " background:url(http://www.l99.com/up_file/image/1203315103109_s.jpg) 0 0 no-repeat;min-height:60px; " >

< img src = " http://www.l99.com/up_file/image/1205307355800_s.jpg " onLoad = " changesize(this,140,140); " title = " 背景一 " alt = " 图片未找到 " />

</ div >

</ td >

</ tr >

< tr >

< td align = " center " >

< span class = " photoName " >

< a href = " http://www.l99.com/up_file/image/1205307355800.jpg " >

< span id = " picturename1 " >

背景一

</ span >

</ a >

</ span >

</ td >

</ tr >

< tr >

< td >

< div class = " photoInfo " >

< span class = " spanStation " >

</ span >& nbsp; < span class = " spanTime " id = " picturetime1 " > 2008 - 02 - 28 </ span >

</ div >

< div class = " photoEdit " >

< a href = " http://www.l99.com/up_file/image/1205307355800.jpg " > 查看图片 </ a >

</ div >

</ td >

</ tr >

</ table >

</ div >

< div class = " userAlbum " id = " photo_2 " >

< table width = " 150 " height = " 100% " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >

< tr >

< td align = " center " valign = " bottom " height = " 140 " >

< div id = " 2_2 " class = " userPhoto " style = " background:url(http://www.l99.com/up_file/image/1203315103109_s.jpg) 0 0 no-repeat;min-height:60px; " >

< img src = " http://www.l99.com/up_file/image/1205307353981_s.jpg " onLoad = " changesize(this,140,140); " title = " 22222222222222222222 " alt = " 图片未找到 " />

</ div >

</ td >

</ tr >

< tr >

< td align = " center " >

< span class = " photoName " >

< a href = " http://www.l99.com/up_file/image/1205307353981.jpg " >

< span id = " picturename2 " >

背景二

</ span >

</ a >

</ span >

</ td >

</ tr >

< tr >

< td >

< div class = " photoInfo " >

< span class = " spanStation " >

</ span >& nbsp; < span class = " spanTime " id = " picturetime2 " > 2008 - 02 - 28 </ span >

</ div >

< div class = " photoEdit " >

< a href = " http://www.l99.com/up_file/image/1205307353981.jpg " > 查看图片 </ a >

</ div >

</ td >

</ tr >

</ table >

</ div >

< div class = " userAlbum " id = " photo_3 " >

< table width = " 150 " height = " 100% " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >

< tr >

< td align = " center " valign = " bottom " height = " 140 " >

< div id = " 3_2 " class = " userPhoto " style = " background:url(http://www.l99.com/up_file/image/1203315103109_s.jpg) 0 0 no-repeat;min-height:60px; " >

< img src = " http://www.l99.com/up_file/image/1205307354778_s.jpg " onLoad = " changesize(this,140,140); " title = " 33333333333333333 " alt = " 图片未找到 " />

</ div >

</ td >

</ tr >

< tr >

< td align = " center " >

< span class = " photoName " >

< a href = " http://www.l99.com/up_file/image/1205307354778.jpg " >

< span id = " picturename3 " >

背景三

</ span >

</ a >

</ span >

</ td >

</ tr >

< tr >

< td >

< div class = " photoInfo " >

< span class = " spanStation " >

</ span >& nbsp; < span class = " spanTime " id = " picturetime3 " > 2008 - 02 - 28 </ span >

</ div >

< div class = " photoEdit " >

< a href = " http://www.l99.com/up_file/image/1205307354778.jpg " > 查看图片 </ a >

</ div >

</ td >

</ tr >

</ table >

</ div >

< div class = " userAlbum " id = " photo_4 " >

< table width = " 150 " height = " 100% " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >

< tr >

< td align = " center " valign = " bottom " height = " 140 " >

< div id = " 4_2 " class = " userPhoto " style = " background:url(http://www.l99.com/up_file/image/1203315103109_s.jpg) 0 0 no-repeat;min-height:60px; " >

< img src = " http://www.l99.com/up_file/image/1205307352029_s.jpg " onLoad = " changesize(this,140,140); " title = " 444444444444 " alt = " 图片未找到 " />

</ div >

</ td >

</ tr >

< tr >

< td align = " center " >

< span class = " photoName " >

< a href = " http://www.l99.com/up_file/image/1205307352029.jpg " >

< span id = " picturename4 " >

背景四

</ span >

</ a >

</ span >

</ td >

</ tr >

< tr >

< td >

< div class = " photoInfo " >

< span class = " spanStation " >

</ span >& nbsp; < span class = " spanTime " id = " picturetime4 " > 2008 - 02 - 28 </ span >

</ div >

< div class = " photoEdit " >

< a href = " http://www.l99.com/up_file/image/1205307352029.jpg " > 查看图片 </ a >

</ div >

</ td >

</ tr >

</ table >

</ div >

< div class = " userAlbum " id = " photo_5 " >

< table width = " 150 " height = " 100% " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >

< tr >

< td align = " center " valign = " bottom " height = " 140 " >

< div id = " 5_2 " class = " userPhoto " style = " background:url(http://www.l99.com/up_file/image/1203315103109_s.jpg) 0 0 no-repeat;min-height:60px; " >

< img src = " http://www.l99.com/up_file/image/1205307352732_s.jpg " onLoad = " changesize(this,140,140); " title = " 555555555555555555555 " alt = " 图片未找到 " />

</ div >

</ td >

</ tr >

< tr >

< td align = " center " >

< span class = " photoName " >

< a href = " http://www.l99.com/up_file/image/1205307352732.jpg " >

< span id = " picturename5 " >

背景五

</ span >

</ a >

</ span >

</ td >

</ tr >

< tr >

< td >

< div class = " photoInfo " >

< span class = " spanStation " >

</ span >& nbsp; < span class = " spanTime " id = " picturetime5 " > 2008 - 02 - 28 </ span >

</ div >

< div class = " photoEdit " >

< a href = " http://www.l99.com/up_file/image/1205307352732.jpg " > 查看图片 </ a >

</ div >

</ td >

</ tr >

</ table >

</ div >

< div class = " userAlbum " id = " photo_6 " >

< table width = " 150 " height = " 100% " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >

< tr >

< td align = " center " valign = " bottom " height = " 140 " >

< div id = " 6_2 " class = " userPhoto " style = " background:url(http://www.l99.com/up_file/image/1203315103109_s.jpg) 0 0 no-repeat;min-height:60px; " >

< img src = " http://www.l99.com/up_file/image/1203801941011_s.jpg " onLoad = " changesize(this,140,140); " title = " 6666666666666666 " alt = " 图片未找到 " />

</ div >

</ td >

</ tr >

< tr >

< td align = " center " >

< span class = " photoName " >

< a href = " http://www.l99.com/up_file/image/1203801941011.jpg " >

< span id = " picturename6 " >

背景六

</ span >

</ a >

</ span >

</ td >

</ tr >

< tr >

< td >

< div class = " photoInfo " >

< span class = " spanStation " >

</ span >& nbsp; < span class = " spanTime " id = " picturetime6 " > 2008 - 02 - 28 </ span >

</ div >

< div class = " photoEdit " >

< a href = " http://www.l99.com/up_file/image/1203801941011.jpg " > 查看图片 </ a >

</ div >

</ td >

</ tr >

</ table >

</ div >

< div class = " photoright " >

< div id = " photoCategory " >

< div class = " albumFile " >

< div id = " albumImage_1 " class = " albumbox " >

< div style = " width:125px;height:45px;padding:45px 0 0 0; text-align: center; " >

< a href = " # " >

< img src = " http://lh4.google.com/pengsky78/R9eSpYiDBYI/AAAAAAAAADI/nitvDi94hLM/s144/tt.png " onLoad = " changesize(this,85,55); " title = " http://lh4.google.com/pengsky78/R9eSpYiDBYI/AAAAAAAAADI/nitvDi94hLM/s144/tt.png " />

</ a >

</ div >

< div class = " right " >

< div > 相册名:幽默

范围:公开

</ div >

< div >

照片数量:

< span id = " album_1 " >

</ span >

</ div >

< div >

查看相册

</ div >

< div class = " albumFile " >

< div id = " albumImage_2 " class = " albumbox " >

< div style = " width:125px;height:45px;padding:45px 0 0 0; text-align: center; " >

< a href = " # " >

< img src = " http://www.l99.com/up_file/image/1205307352029_s.jpg " onLoad = " changesize(this,85,55); " title = " aaaaaaaaaaa " />

</ a >

</ div >

< div class = " right " >

< div > 相册名:背景

范围:公开

</ div >

< div >

照片数量:

< span id = " album_2 " >

</ span >

</ div >

< div >

查看相册

</ div >

< div class = " albumFile " >

< div id = " albumImage_3 " class = " albumbox " >

< div style = " width:125px;height:45px;padding:45px 0 0 0; text-align: center; " >

< a href = " # " >

< img src = " http://lh4.google.com/pengsky78/R9eSpYiDBYI/AAAAAAAAADI/nitvDi94hLM/s144/tt.png " onLoad = " changesize(this,85,55); " title = " aaaaaaaaaaa " />

</ a >

</ div >

< div class = " right " >

< div > 相册名:军事

范围:公开

</ div >

< div >

照片数量:

< span id = " album_3 " >

</ span >

</ div >

< div >

查看相册

</ div >

< div class = " albumFile " >

< div id = " albumImage_4 " class = " albumbox " >

< div style = " width:125px;height:45px;padding:45px 0 0 0; text-align: center; " >

< a href = " # " >

< img src = " http://lh4.google.com/pengsky78/R9eSpYiDBYI/AAAAAAAAADI/nitvDi94hLM/s144/tt.png " onLoad = " changesize(this,85,55); " title = " aaaaaaaaaaa " />

</ a >

</ div >

< div class = " right " >

< div > 相册名:明星

范围:公开

</ div >

< div >

照片数量:

< span id = " album_4 " >

</ span >

</ div >

< div >

查看相册

</ div >

< div class = " albumFile " >

< div id = " albumImage_5 " class = " albumbox " >

< div style = " width:125px;height:45px;padding:45px 0 0 0; text-align: center; " >

< a href = " # " >

< img src = " http://lh4.google.com/pengsky78/R9eSpYiDBYI/AAAAAAAAADI/nitvDi94hLM/s144/tt.png " onLoad = " changesize(this,85,55); " title = " aaaaaaaaaaa " />

</ a >

</ div >

< div class = " right " >

< div > 相册名:风景

范围:公开

</ div >

< div >

照片数量:

< span id = " album_5 " >

</ span >

</ div >

< div >

查看相册

</ div >

< div class = " albumFile " >

< div id = " albumImage_6 " class = " albumbox " >

< div style = " width:125px;height:45px;padding:45px 0 0 0; text-align: center; " >

< a href = " # " >

< img src = " http://lh4.google.com/pengsky78/R9eSpYiDBYI/AAAAAAAAADI/nitvDi94hLM/s144/tt.png " onLoad = " changesize(this,85,55); " title = " aaaaaaaaaaa " />

</ a >

</ div >

< div class = " right " >

< div > 相册名:文化

范围:公开

</ div >

< div >

照片数量:

< span id = " album_6 " >

</ span >

</ div >

< div >

查看相册

</ div >

< div class = " albumFile " >

< div id = " albumImage_7 " class = " albumbox " >

< div style = " width:125px;height:45px;padding:45px 0 0 0; text-align: center; " >

< a href = " # " >

< img src = " http://lh4.google.com/pengsky78/R9eSpYiDBYI/AAAAAAAAADI/nitvDi94hLM/s144/tt.png " onLoad = " changesize(this,85,55); " title = " aaaaaaaaaaa " />

</ a >

</ div >

< div class = " right " >

< div > 相册名:游戏

范围:公开

</ div >

< div >

照片数量:

< span id = " album_7 " >

</ span >

</ div >

< div >

查看相册

</ div >

< div id = " wrap " >

< div id = " track-top " ></ div >

< div id = " track " >

< div id = " handle " >< img src = " http://www.l99.com/skin1/images/scrollbar-handle-vertical.png " alt = "" /></ div >

</ div >

< div class = " clear " ></ div >

</ div >

< script type = " text/javascript " >

var dragDropObj = new DHTMLgoodies_dragDrop(); // Creating drag and drop object 创建拖拽对象

// Assigning drag events to the capitals分配拖拽对象

dragDropObj.addSource( ' 1_2 ' , true ); // Make <div id="box1"> dragable. slide item back into original position after drop

dragDropObj.addSource( ' 2_2 ' , true );

dragDropObj.addSource( ' 3_2 ' , true );

dragDropObj.addSource( ' 4_2 ' , true );

dragDropObj.addSource( ' 5_2 ' , true );

dragDropObj.addSource( ' 6_2 ' , true );

// Assigning drop events on the countries分配释放对象

dragDropObj.addTarget( ' albumImage_1 ' , ' dropItems ' );

dragDropObj.addTarget( ' albumImage_2 ' , ' dropItems ' );

dragDropObj.addTarget( ' albumImage_3 ' , ' dropItems ' );

dragDropObj.addTarget( ' albumImage_4 ' , ' dropItems ' );

dragDropObj.addTarget( ' albumImage_5 ' , ' dropItems ' );

dragDropObj.addTarget( ' albumImage_6 ' , ' dropItems ' );

dragDropObj.addTarget( ' albumImage_7 ' , ' dropItems ' );

dragDropObj.init();

// 触发函数

function dropItems(idOfDraggedItem,targetId,x,y) {

var sourceObj = document.getElementById(idOfDraggedItem);

var targetObj = document.getElementById(targetId);

var numericIdTarget = targetId.replace(/[^0-9]/gi,'')/1

var numericIdSource = idOfDraggedItem.split('_');;

if(numericIdTarget == numericIdSource[1]){

alert('文件夹相同!');

return;

}else

{

alert('pictureId:' + numericIdSource[0] + 'oldAlbumId:' + numericIdSource[1] + 'newAlbumId:' + numericIdTarget);

return;

}

function changesize(a,photow,photoh) {

if(a.width > photow)

{

a.height = photow * a.height / a.width;

a.width = photow;

changesize(a,photow,photoh);

}else if(a.height > photoh){

a.width = photoh * a.width / a.height;

a.height = photoh;

changesize(a,photow,photoh);

}else{

return;

}

</ script >

< script type = " text/javascript " language = " javascript " >

// <![CDATA[

var currentPosition = 0 ;

var slider = new Control.Slider( ' handle ' , ' track ' , {

axis: 'vertical',

onSlide: function(v) { scrollVertical(v, $('photoCategory'), slider); },

onChange: function(v) { scrollVertical(v, $('photoCategory'), slider); }

} );

// scroll the element vertically based on its width and the slider maximum value

function scrollVertical(value, element, slider) {

element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));

currentPosition = element.scrollTop;

}

if ($( ' photoCategory ' ).scrollHeight <= $( ' photoCategory ' ).offsetHeight) {

slider.setDisabled();

$('wrap').hide();

}

// ]]>

</ script >

</ body >

</ html >

第二个文件 dragdrop.js

/************************************************************************************************************

CUSTOM DRAG AND DROP SCRIPT

This script is a part of DHTMLSuite for application which will be released before christmas 2006.

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse

Thank you!

www.dhtmlgoodies.com

Alf Magne Kalleland

************************************************************************************************************/

/************************************************************************************************************

* Global variables

************************************************************************************************************/

var standardObjectsCreated = false ; // The classes below will check this variable, if it is false, default help objects will be created

var clientInfoObj; // Object of class DHTMLgoodies_clientInfo

var dhtmlSuiteConfigObj = false ; // Object of class DHTMLgoodies_config

var dhtmlSuiteCommonObj; // Object of class DHTMLgoodies_common

// {{{ DHTMLgoodies_createStandardObjects()

/**

* Create objects used by all scripts

* @public

function DHTMLgoodies_createStandardObjects()

{

clientInfoObj = new DHTMLgoodies_clientInfo(); // Create browser info object

clientInfoObj.init();

if(!dhtmlSuiteConfigObj){ // If this object isn't allready created, create it.

dhtmlSuiteConfigObj = new DHTMLgoodies_config(); // Create configuration object.

dhtmlSuiteConfigObj.init();

}

dhtmlSuiteCommonObj = new DHTMLgoodies_common(); // Create configuration object.

dhtmlSuiteCommonObj.init();

}

/************************************************************************************************************

* Configuration class used by most of the scripts

* Created: August, 19th, 2006

* Purpose of class: Store global variables/configurations used by the classes below. Example: If you want to

* change the path to the images used by the scripts, change it here. An object of this

* class will always be available to the other classes. The name of this object is

* "dhtmlSuiteConfigObj".

* If you want to create an object of this class manually, remember to name it "dhtmlSuiteConfigObj"

* This object should then be created before any other objects. This is nescessary if you want

* the other objects to use the values you have put into the object.

* Update log:

************************************************************************************************************/

// {{{ DHTMLgoodies_config()

/**

* Constructor

* @public

function DHTMLgoodies_config()

{

var imagePath; // Path to images used by the classes.

var cssPath; // Path to CSS files used by the DHTML suite.

}

DHTMLgoodies_config.prototype = {

// {{{ init()

/**

* @public

init : function()

{

this.imagePath = 'images_dhtmlsuite/'; // Path to images

this.cssPath = 'css_dhtmlsuite/'; // Path to images

}

// }}}

// {{{ setCssPath()

/**

* This method will save a new CSS path, i.e. where the css files of the dhtml suite are located.

* @param string newCssPath = New path to css files

* @public

setCssPath : function(newCssPath)

{

this.cssPath = newCssPath;

}

// }}}

// {{{ setImagePath()

/**

* This method will save a new image file path, i.e. where the image files used by the dhtml suite ar located

* @param string newImagePath = New path to image files

* @public

setImagePath : function(newImagePath)

{

this.imagePath = newImagePath;

}

// }}}

}

/************************************************************************************************************

* A class with general methods used by most of the scripts

* Created: August, 19th, 2006

* Purpose of class: A class containing common method used by one or more of the gui classes below,

* example: loadCSS.

* An object("dhtmlSuiteCommonObj") of this class will always be available to the other classes.

* Update log:

************************************************************************************************************/

// {{{ DHTMLgoodies_common()

/**

* Constructor

function DHTMLgoodies_common()

{

var loadedCSSFiles; // Array of loaded CSS files. Prevent same CSS file from being loaded twice.

}

DHTMLgoodies_common.prototype = {

// {{{ init()

/**

* This method initializes the DHTMLgoodies_common object.

* @public

init : function()

{

this.loadedCSSFiles = new Array();

}

// }}}

// {{{ getTopPos()

/**

* This method will return the top coordinate(pixel) of an object

* @param Object inputObj = Reference to HTML element

* @public

getTopPos : function(inputObj)

{

var returnValue = inputObj.offsetTop;

while((inputObj = inputObj.offsetParent) != null){

if(inputObj.tagName!='HTML'){

returnValue += inputObj.offsetTop;

if(document.all)returnValue+=inputObj.clientTop;

}

return returnValue;

}

// }}}

// {{{ getLeftPos()

/**

* This method will return the left coordinate(pixel) of an object

* @param Object inputObj = Reference to HTML element

* @public

getLeftPos : function(inputObj)

{

var returnValue = inputObj.offsetLeft;

while((inputObj = inputObj.offsetParent) != null){

if(inputObj.tagName!='HTML'){

returnValue += inputObj.offsetLeft;

if(document.all)returnValue+=inputObj.clientLeft;

}

return returnValue;

}

// }}}

// {{{ cancelEvent()

/**

* This function only returns false. It is used to cancel selections and drag

* @public

cancelEvent : function()

{

return false;

}

// }}}

}

/************************************************************************************************************

* Client info class

* Created: August, 18th, 2006

* Purpose of class: Provide browser information to the classes below. Instead of checking for

* browser versions and browser types in the classes below, they should check this

* easily by referncing properties in the class below. An object("clientInfoObj") of this

* class will always be accessible to the other classes.

* Update log:

************************************************************************************************************/

Constructor

function DHTMLgoodies_clientInfo()

{

var browser; // Complete user agent information

var isOpera; // Is the browser "Opera"

var isMSIE; // Is the browser "Internet Explorer"

var isFirefox; // Is the browser "Firefox"

var navigatorVersion; // Browser version

}

DHTMLgoodies_clientInfo.prototype = {

/**

* Constructor

* Params: none:

* return value: none;

**/

// {{{ init()

/**

* This method initializes the script

* @public

init : function()

{

this.browser = navigator.userAgent;

this.isOpera = (this.browser.toLowerCase().indexOf('opera')>=0)?true:false;

this.isFirefox = (this.browser.toLowerCase().indexOf('firefox')>=0)?true:false;

this.isMSIE = (this.browser.toLowerCase().indexOf('msie')>=0)?true:false;

this.navigatorVersion = navigator.appVersion.replace(/.*?MSIE (d.d).*/g,'$1')/1;

}

// }}}

}

/************************************************************************************************************

* Drag and drop class

* Created: August, 18th, 2006

* Purpose of class: A general drag and drop class. By creating objects of this class, you can make elements

* on your web page dragable and also assign actions to element when an item is dropped on it.

* A page should only have one object of this class.

* IMPORTANT when you use this class: Don't assign layout to the dragable element ids

* Assign it to classes or the tag instead. example: If you make <div id="dragableBox1" class="aBox">

* dragable, don't assign css to #dragableBox1. Assign it to div or .aBox instead.

* Update log:

************************************************************************************************************/

var referenceToDragDropObject; // A reference to an object of the class below.

Constructor

function DHTMLgoodies_dragDrop()

{

var mouse_x; // mouse x position when drag is started

var mouse_y; // mouse y position when drag is started.

var el_x; // x position of dragable element

var el_y; // y position of dragable element

var dragDropTimer; // Timer - short delay from mouse down to drag init.

var numericIdToBeDragged; // numeric reference to element currently being dragged.

var dragObjCloneArray; // Array of cloned dragable elements. every

var dragDropSourcesArray; // Array of source elements, i.e. dragable elements.

var dragDropTargetArray; // Array of target elements, i.e. elements where items could be dropped.

var currentZIndex; // Current z index. incremented on each drag so that currently dragged element is always on top.

var okToStartDrag; // Variable which is true or false. It would be false for 1/100 seconds after a drag has been started.

// This is useful when you have nested dragable elements. It prevents the drag process from staring on

// parent element when you click on dragable sub element.

var moveBackBySliding; // Variable indicating if objects should slide into place moved back to their location without any slide animation.

}

DHTMLgoodies_dragDrop.prototype = {

// {{{ init()

/**

* Initialize the script

* This method should be called after you have added sources and destinations.

* @public

init : function()

{

if(!standardObjectsCreated)DHTMLgoodies_createStandardObjects(); // This line starts all the init methods

this.currentZIndex = 10000;

this.dragDropTimer = -1;

this.dragObjCloneArray = new Array();

this.numericIdToBeDragged = false;

this.__initDragDropScript();

referenceToDragDropObject = this;

this.okToStartDrag = true;

this.moveBackBySliding = true;

}

// }}}

// {{{ addSource()

/**

* Add dragable element

* @param String sourceId = Id of source

* @param boolean slideBackAfterDrop = Slide the item back to it's original location after drop.

* @param boolean xAxis = Allowed to slide along the x-axis(default = true, i.e. if omitted).

* @param boolean yAxis = Allowed to slide along the y-axis(default = true, i.e. if omitted).

* @param String dragOnlyWithinElId = You will only allow this element to be dragged within the boundaries of the element with this id.

* @param String functionToCallOnDrag = Function to call when drag is initiated. id of element(clone and orig) will be passed to this function . clone is a copy of the element created by this script. The clone is what you see when drag is in process.

* @public

addSource : function(sourceId,slideBackAfterDrop,xAxis,yAxis,dragOnlyWithinElId,functionToCallOnDrag)

{

if(!functionToCallOnDrag)functionToCallOnDrag=false;

if(!this.dragDropSourcesArray)this.dragDropSourcesArray = new Array();

if(!document.getElementById(sourceId))alert('The source element with id ' + sourceId + ' does not exists');

var obj = document.getElementById(sourceId);

if(xAxis!==false)xAxis = true;

if(yAxis!==false)yAxis = true;

this.dragDropSourcesArray[this.dragDropSourcesArray.length] = [obj,slideBackAfterDrop,xAxis,yAxis,dragOnlyWithinElId,functionToCallOnDrag];

obj.setAttribute('dragableElement',this.dragDropSourcesArray.length-1);

obj.dragableElement = this.dragDropSourcesArray.length-1;

}

// }}}

// {{{ addTarget()

/**

* Add drop target

* @param String targetId = Id of drop target

* @param String functionToCallOnDrop = name of function to call on drop.

* Input to this the function specified in functionToCallOnDrop function would be

* id of dragged element

* id of the element the item was dropped on.

* mouse x coordinate when item was dropped

* mouse y coordinate when item was dropped

* @public

addTarget : function(targetId,functionToCallOnDrop)

{

if(!this.dragDropTargetArray)this.dragDropTargetArray = new Array();

if(!document.getElementById(targetId))alert('The target element with id ' + targetId + ' does not exists');

var obj = document.getElementById(targetId);

this.dragDropTargetArray[this.dragDropTargetArray.length] = [obj,functionToCallOnDrop];

}

// }}}

// {{{ setSlide()

/**

* Activate or deactivate sliding animations.

* @param boolean slide = Move element back to orig. location in a sliding animation

* @public

setSlide : function(slide)

{

this.moveBackBySliding = slide;

}

// }}}

/* Start private methods */

// {{{ __initDragDropScript()

/**

* Initialize drag drop script - this method is called by the init() method.

* @private

__initDragDropScript : function()

{

var refToThis = this;

for(var no=0;no<this.dragDropSourcesArray.length;no++){

var el = this.dragDropSourcesArray[no][0].cloneNode(true);

el.onmousedown =this.__initDragDropElement;

el.id = 'DHTMLgoodies_dragableElement' + no;

el.style.opacity='0.5';

el.style.position='absolute';

el.style.visibility='hidden';

el.style.display='none';

this.dragDropSourcesArray[no][0].parentNode.insertBefore(el,this.dragDropSourcesArray[no][0]);

el.style.top = dhtmlSuiteCommonObj.getTopPos(this.dragDropSourcesArray[no][0]) + 'px';

el.style.left = dhtmlSuiteCommonObj.getLeftPos(this.dragDropSourcesArray[no][0]) + 'px';

this.dragDropSourcesArray[no][0].onmousedown =this.__initDragDropElement;

this.dragObjCloneArray[no] = el;

}

document.documentElement.onmousemove = this.__moveDragableElement;

document.documentElement.onmouseup = this.__stop_dragDropElement;

document.documentElement.onselectstart = function() { return refToThis.__cancelSelectionEvent(false,this) };

document.documentElement.ondragstart = function() { return dhtmlSuiteCommonObj.cancelEvent(false,this) };

}

// }}}

// {{{ __initDragDropElement()

/**

* Initialize drag process

* @param Event e = Event object, used to get x and y coordinate of mouse pointer

* @private

// {{{ __initDragDropElement()

/**

* Initialize drag process

* @param Event e = Event object, used to get x and y coordinate of mouse pointer

* @private

__initDragDropElement : function(e)

{

if(!referenceToDragDropObject.okToStartDrag)return;

referenceToDragDropObject.okToStartDrag = false;

setTimeout('referenceToDragDropObject.okToStartDrag = true;',100);

if(document.all)e = event;

referenceToDragDropObject.numericIdToBeDragged = this.getAttribute('dragableElement');

referenceToDragDropObject.numericIdToBeDragged = referenceToDragDropObject.numericIdToBeDragged + '';

if(referenceToDragDropObject.numericIdToBeDragged=='')referenceToDragDropObject.numericIdToBeDragged = this.dragableElement;

referenceToDragDropObject.dragDropTimer=0;

referenceToDragDropObject.mouse_x = e.clientX;

referenceToDragDropObject.mouse_y = e.clientY;

referenceToDragDropObject.currentZIndex = referenceToDragDropObject.currentZIndex + 1;

referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.zIndex = referenceToDragDropObject.currentZIndex;

referenceToDragDropObject.currentEl_allowX = referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][2];

referenceToDragDropObject.currentEl_allowY = referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][3];

var parentEl = referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][4];

referenceToDragDropObject.drag_minX = false;

referenceToDragDropObject.drag_minY = false;

referenceToDragDropObject.drag_maxX = false;

referenceToDragDropObject.drag_maxY = false;

if(parentEl){

var obj = document.getElementById(parentEl);

if(obj){

referenceToDragDropObject.drag_minX = dhtmlSuiteCommonObj.getLeftPos(obj);

referenceToDragDropObject.drag_minY = dhtmlSuiteCommonObj.getTopPos(obj);

referenceToDragDropObject.drag_maxX = referenceToDragDropObject.drag_minX + obj.clientWidth;

referenceToDragDropObject.drag_maxY = referenceToDragDropObject.drag_minY + obj.clientHeight;

}

// Reposition dragable element

if(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][1]){

referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.top = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0]) + 'px';

referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.left = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0]) + 'px';

}

referenceToDragDropObject.el_x = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.left.replace('px','')/1;

referenceToDragDropObject.el_y = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.top.replace('px','')/1;

referenceToDragDropObject.__timerDragDropElement();

return false;

}

// }}}

// {{{ __timerDragDropElement()

/**

* A small delay from mouse down to drag starts

* @private

__timerDragDropElement : function()

{

window.thisRef = this;

if(this.dragDropTimer>=0 && this.dragDropTimer<5){

this.dragDropTimer = this.dragDropTimer + 1;

setTimeout('window.thisRef.__timerDragDropElement()',2);

return;

}

if(this.dragDropTimer>=5){

if(this.dragObjCloneArray[this.numericIdToBeDragged].style.display=='none'){

this.dragDropSourcesArray[this.numericIdToBeDragged][0].style.visibility = 'hidden';

this.dragObjCloneArray[this.numericIdToBeDragged].style.display = 'block';

this.dragObjCloneArray[this.numericIdToBeDragged].style.visibility = 'visible';

this.dragObjCloneArray[this.numericIdToBeDragged].style.top = dhtmlSuiteCommonObj.getTopPos(this.dragDropSourcesArray[this.numericIdToBeDragged][0]) + 'px';

this.dragObjCloneArray[this.numericIdToBeDragged].style.left = dhtmlSuiteCommonObj.getLeftPos(this.dragDropSourcesArray[this.numericIdToBeDragged][0]) + 'px';

}

if(this.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][5]){

var id1 = this.dragObjCloneArray[this.numericIdToBeDragged].id + '';

var id2 = this.dragDropSourcesArray[this.numericIdToBeDragged][0].id + '';

var string = this.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][5] + '("' + id1 + '","' + id2 + '")';

eval(string);

}

// }}}

// {{{ __cancelSelectionEvent()

/**

* Cancel text selection when drag is in progress

* @private

__cancelSelectionEvent : function()

{

if(this.dragDropTimer>=0)return false;

return true;

}

// }}}

// {{{ __moveDragableElement()

/**

* Move dragable element according to mouse position when drag is in process.

* @param Event e = Event object, used to get x and y coordinate of mouse pointer

* @private

__moveDragableElement : function(e)

{

if(document.all)e = event;

if(referenceToDragDropObject.dragDropTimer<5)return;

var dragObj = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged];

if(referenceToDragDropObject.currentEl_allowX){

var leftPos = (e.clientX - referenceToDragDropObject.mouse_x + referenceToDragDropObject.el_x);

if(referenceToDragDropObject.drag_maxX){

var tmpMaxX = referenceToDragDropObject.drag_maxX - dragObj.offsetWidth;

if(leftPos > tmpMaxX)leftPos = tmpMaxX

if(leftPos < referenceToDragDropObject.drag_minX)leftPos = referenceToDragDropObject.drag_minX;

}

dragObj.style.left = leftPos + 'px';

}

if(referenceToDragDropObject.currentEl_allowY){

var topPos = (e.clientY - referenceToDragDropObject.mouse_y + referenceToDragDropObject.el_y);

if(referenceToDragDropObject.drag_maxY){

var tmpMaxY = referenceToDragDropObject.drag_maxY - dragObj.offsetHeight;

if(topPos > tmpMaxY)topPos = tmpMaxY;

if(topPos < referenceToDragDropObject.drag_minY)topPos = referenceToDragDropObject.drag_minY;

}

dragObj.style.top = topPos + 'px';

}

var leftPosMouse = e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);

var topPosMouse = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop) + currentPosition;

for(var no=0;no<referenceToDragDropObject.dragDropTargetArray.length;no++){

var leftPosEl = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropTargetArray[no][0]);

var topPosEl = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropTargetArray[no][0]);

var widthEl = referenceToDragDropObject.dragDropTargetArray[no][0].offsetWidth;

var heightEl = referenceToDragDropObject.dragDropTargetArray[no][0].offsetHeight;

var currentTargetContariner = referenceToDragDropObject.dragDropTargetArray[no][0];

if(leftPosMouse > leftPosEl && leftPosMouse < (leftPosEl + widthEl) && topPosMouse > topPosEl && topPosMouse < (topPosEl + heightEl)){

//if(referenceToDragDropObject.dragDropTargetArray[no][1])eval(referenceToDragDropObject.dragDropTargetArray[no][1] + '("' + referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0].id + '","' + referenceToDragDropObject.dragDropTargetArray[no][0].id + '",' + e.clientX + ',' + e.clientY + ')');

//alert(referenceToDragDropObject.dragDropTargetArray[no][1]);

currentTargetContariner.style.background = "url(http://www.l99.com/skin1/images/folder.gif) no-repeat 0px";

//currentTargetContariner.innerHTML = referenceToDragDropObject.dragDropTargetArray[no][0];

break;

} else {

currentTargetContariner.style.background = "url(http://www.l99.com/skin1/images/folder.gif) no-repeat -128px";

}

// }}}

// {{{ __stop_dragDropElement()

/**

* Drag process stopped.

* Note! In this method "this" refers to the element being dragged. referenceToDragDropObject refers to the dragDropObject.

* @param Event e = Event object, used to get x and y coordinate of mouse pointer

* @private

__stop_dragDropElement : function(e)

{

if(referenceToDragDropObject.dragDropTimer<5)return;

if(document.all)e = event;

// Dropped on which element

if (e.target) dropDestination = e.target;

else if (e.srcElement) dropDestination = e.srcElement;

if (dropDestination.nodeType == 3) // defeat Safari bug

dropDestination = dropDestination.parentNode;

var leftPosMouse = e.clientX + Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);

var topPosMouse = e.clientY + Math.max(document.body.scrollTop,document.documentElement.scrollTop) + currentPosition;

if(!referenceToDragDropObject.dragDropTargetArray)referenceToDragDropObject.dragDropTargetArray = new Array();

// Loop through drop targets and check if the coordinate of the mouse is over it. If it is, call specified drop function.

for(var no=0;no<referenceToDragDropObject.dragDropTargetArray.length;no++){

var leftPosEl = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropTargetArray[no][0]);

var topPosEl = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropTargetArray[no][0]);

var widthEl = referenceToDragDropObject.dragDropTargetArray[no][0].offsetWidth;

var heightEl = referenceToDragDropObject.dragDropTargetArray[no][0].offsetHeight;

if(leftPosMouse > leftPosEl && leftPosMouse < (leftPosEl + widthEl) && topPosMouse > topPosEl && topPosMouse < (topPosEl + heightEl)){

if(referenceToDragDropObject.dragDropTargetArray[no][1])eval(referenceToDragDropObject.dragDropTargetArray[no][1] + '("' + referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0].id + '","' + referenceToDragDropObject.dragDropTargetArray[no][0].id + '",' + e.clientX + ',' + e.clientY + ')');

break;

}

if(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][1]){

referenceToDragDropObject.__slideElementBackIntoItsOriginalPosition(referenceToDragDropObject.numericIdToBeDragged);

}

// Variable cleanup after drop

referenceToDragDropObject.dragDropTimer = -1;

referenceToDragDropObject.numericIdToBeDragged = false;

}

// }}}

// {{{ __slideElementBackIntoItsOriginalPosition()

/**

* Slide an item back to it's original position

* @param Integer numId = numeric index of currently dragged element

* @private

__slideElementBackIntoItsOriginalPosition : function(numId)

{

// Coordinates current element position

var currentX = this.dragObjCloneArray[numId].style.left.replace('px','')/1;

var currentY = this.dragObjCloneArray[numId].style.top.replace('px','')/1;

// Coordinates - where it should slide to

var targetX = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropSourcesArray[numId][0]);

var targetY = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropSourcesArray[numId][0]);;

if(this.moveBackBySliding){

// Call the step by step slide method

this.__processSlide(numId,currentX,currentY,targetX,targetY);

}else{

this.dragObjCloneArray[numId].style.display='none';

this.dragDropSourcesArray[numId][0].style.visibility = 'visible';

}

// }}}

// {{{ __processSlide()

/**

* Move the element step by step in this method

* @param Int numId = numeric index of currently dragged element

* @param Int currentX = Elements current X position

* @param Int currentY = Elements current Y position

* @param Int targetX = Destination X position, i.e. where the element should slide to

* @param Int targetY = Destination Y position, i.e. where the element should slide to

* @private

__processSlide : function(numId,currentX,currentY,targetX,targetY)

{

// Find slide x value

var slideX = Math.round(Math.abs(Math.max(currentX,targetX) - Math.min(currentX,targetX)) / 10);

// Find slide y value

var slideY = Math.round(Math.abs(Math.max(currentY,targetY) - Math.min(currentY,targetY)) / 10);

if(slideY<3 && Math.abs(slideX)<10)slideY = 3; // 3 is minimum slide value

if(slideX<3 && Math.abs(slideY)<10)slideX = 3; // 3 is minimum slide value

if(currentX > targetX) slideX*=-1; // If current x is larger than target x, make slide value negative<br>

if(currentY > targetY) slideY*=-1; // If current y is larger than target x, make slide value negative

// Update currentX and currentY

currentX = currentX + slideX;

currentY = currentY + slideY;

// If currentX or currentY is close to targetX or targetY, make currentX equal to targetX(or currentY equal to targetY)

if(Math.max(currentX,targetX) - Math.min(currentX,targetX) < 4)currentX = targetX;

if(Math.max(currentY,targetY) - Math.min(currentY,targetY) < 4)currentY = targetY;

// Update CSS position(left and top)

this.dragObjCloneArray[numId].style.left = currentX + 'px';

this.dragObjCloneArray[numId].style.top = currentY + 'px';

// currentX different than targetX or currentY different than targetY, call this function in again in 5 milliseconds

if(currentX!=targetX || currentY != targetY){

window.thisRef = this; // Reference to this dragdrop object

setTimeout('window.thisRef.__processSlide("' + numId + '",' + currentX + ',' + currentY + ',' + targetX + ',' + targetY + ')',5);

}else{ // Slide completed. Make absolute positioned element invisible and original element visible

this.dragObjCloneArray[numId].style.display='none';

this.dragDropSourcesArray[numId][0].style.visibility = 'visible';

}

第三个文件 slider.js

// script.aculo.us slider.js v1.6.5, Wed Nov 08 14:17:49 CET 2006

// script.aculo.us is freely distributable under the terms of an MIT-style license.

// For details, see the script.aculo.us web site: http://script.aculo.us/

if ( ! Control) var Control = {} ;

Control.Slider = Class.create();

// options:

// axis: 'vertical', or 'horizontal' (default)

// callbacks:

// onChange(value)

// onSlide(value)

Control.Slider.prototype = {

initialize: function(handle, track, options) {

var slider = this;

if(handle instanceof Array) {

this.handles = handle.collect( function(e) { return $(e) });

} else {

this.handles = [$(handle)];

}

this.track = $(track);

this.options = options || {};

this.axis = this.options.axis || 'horizontal';

this.increment = this.options.increment || 1;

this.step = parseInt(this.options.step || '1');

this.range = this.options.range || $R(0,1);

this.value = 0; // assure backwards compat

this.values = this.handles.map( function() { return 0 });

this.spans = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false;

this.options.startSpan = $(this.options.startSpan || null);

this.options.endSpan = $(this.options.endSpan || null);

this.restricted = this.options.restricted || false;

this.maximum = this.options.maximum || this.range.end;

this.minimum = this.options.minimum || this.range.start;

// Will be used to align the handle onto the track, if necessary

this.alignX = parseInt(this.options.alignX || '0');

this.alignY = parseInt(this.options.alignY || '0');

this.trackLength = this.maximumOffset() - this.minimumOffset();

this.handleLength = this.isVertical() ?

(this.handles[0].offsetHeight != 0 ?

this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) :

(this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth :

this.handles[0].style.width.replace(/px$/,""));

this.active = false;

this.dragging = false;

this.disabled = false;

if(this.options.disabled) this.setDisabled();

// Allowed values array

this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;

if(this.allowedValues) {

this.minimum = this.allowedValues.min();

this.maximum = this.allowedValues.max();

}

this.eventMouseDown = this.startDrag.bindAsEventListener(this);

this.eventMouseUp = this.endDrag.bindAsEventListener(this);

this.eventMouseMove = this.update.bindAsEventListener(this);

// Initialize handles in reverse (make sure first handle is active)

this.handles.each( function(h,i) {

i = slider.handles.length-1-i;

slider.setValue(parseFloat(

(slider.options.sliderValue instanceof Array ?

slider.options.sliderValue[i] : slider.options.sliderValue) ||

slider.range.start), i);

Element.makePositioned(h); // fix IE

Event.observe(h, "mousedown", slider.eventMouseDown);

});

Event.observe(this.track, "mousedown", this.eventMouseDown);

Event.observe(document, "mouseup", this.eventMouseUp);

Event.observe(document, "mousemove", this.eventMouseMove);

this.initialized = true;

dispose: function() {

var slider = this;

Event.stopObserving(this.track, "mousedown", this.eventMouseDown);

Event.stopObserving(document, "mouseup", this.eventMouseUp);

Event.stopObserving(document, "mousemove", this.eventMouseMove);

this.handles.each( function(h) {

Event.stopObserving(h, "mousedown", slider.eventMouseDown);

});

setDisabled: function(){

this.disabled = true;

setEnabled: function(){

this.disabled = false;

getNearestValue: function(value){

if(this.allowedValues){

if(value >= this.allowedValues.max()) return(this.allowedValues.max());

if(value <= this.allowedValues.min()) return(this.allowedValues.min());

var offset = Math.abs(this.allowedValues[0] - value);

var newValue = this.allowedValues[0];

this.allowedValues.each( function(v) {

var currentOffset = Math.abs(v - value);

if(currentOffset <= offset){

newValue = v;

offset = currentOffset;

}

});

return newValue;

}

if(value > this.range.end) return this.range.end;

if(value < this.range.start) return this.range.start;

return value;

setValue: function(sliderValue, handleIdx){

if(!this.active) {

this.activeHandleIdx = handleIdx || 0;

this.activeHandle = this.handles[this.activeHandleIdx];

this.updateStyles();

}

handleIdx = handleIdx || this.activeHandleIdx || 0;

if(this.initialized && this.restricted) {

if((handleIdx>0) && (sliderValue<this.values[handleIdx-1]))

sliderValue = this.values[handleIdx-1];

if((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1]))

sliderValue = this.values[handleIdx+1];

}

sliderValue = this.getNearestValue(sliderValue);

this.values[handleIdx] = sliderValue;

this.value = this.values[0]; // assure backwards compat

this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] =

this.translateToPx(sliderValue);

this.drawSpans();

if(!this.dragging || !this.event) this.updateFinished();

setValueBy: function(delta, handleIdx) {

this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta,

handleIdx || this.activeHandleIdx || 0);

translateToPx: function(value) {

return Math.round(

((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) *

(value - this.range.start)) + "px";

translateToValue: function(offset) {

return ((offset/(this.trackLength-this.handleLength) *

(this.range.end-this.range.start)) + this.range.start);

getRange: function(range) {

var v = this.values.sortBy(Prototype.K);

range = range || 0;

return $R(v[range],v[range+1]);

minimumOffset: function(){

return(this.isVertical() ? this.alignY : this.alignX);

maximumOffset: function(){

return(this.isVertical() ?

(this.track.offsetHeight != 0 ? this.track.offsetHeight :

this.track.style.height.replace(/px$/,"")) - this.alignY :

(this.track.offsetWidth != 0 ? this.track.offsetWidth :

this.track.style.width.replace(/px$/,"")) - this.alignY);

isVertical: function(){

return (this.axis == 'vertical');

drawSpans: function() {

var slider = this;

if(this.spans)

$R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) });

if(this.options.startSpan)

this.setSpan(this.options.startSpan,

$R(0, this.values.length>1 ? this.getRange(0).min() : this.value ));

if(this.options.endSpan)

this.setSpan(this.options.endSpan,

$R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum));

setSpan: function(span, range) {

if(this.isVertical()) {

span.style.top = this.translateToPx(range.start);

span.style.height = this.translateToPx(range.end - range.start + this.range.start);

} else {

span.style.left = this.translateToPx(range.start);

span.style.width = this.translateToPx(range.end - range.start + this.range.start);

}

updateStyles: function() {

this.handles.each( function(h){ Element.removeClassName(h, 'selected') });

Element.addClassName(this.activeHandle, 'selected');

startDrag: function(event) {

if(Event.isLeftClick(event)) {

if(!this.disabled){

this.active = true;

var handle = Event.element(event);

var pointer = [Event.pointerX(event), Event.pointerY(event)];

var track = handle;

if(track==this.track) {

var offsets = Position.cumulativeOffset(this.track);

this.event = event;

this.setValue(this.translateToValue(

(this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)

));

var offsets = Position.cumulativeOffset(this.activeHandle);

this.offsetX = (pointer[0] - offsets[0]);

this.offsetY = (pointer[1] - offsets[1]);

} else {

// find the handle (prevents issues with Safari)

while((this.handles.indexOf(handle) == -1) && handle.parentNode)

handle = handle.parentNode;

if(this.handles.indexOf(handle)!=-1) {

this.activeHandle = handle;

this.activeHandleIdx = this.handles.indexOf(this.activeHandle);

this.updateStyles();

var offsets = Position.cumulativeOffset(this.activeHandle);

this.offsetX = (pointer[0] - offsets[0]);

this.offsetY = (pointer[1] - offsets[1]);

}

Event.stop(event);

}

update: function(event) {

if(this.active) {

if(!this.dragging) this.dragging = true;

this.draw(event);

// fix AppleWebKit rendering

if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);

Event.stop(event);

}

draw: function(event) {

var pointer = [Event.pointerX(event), Event.pointerY(event)];

var offsets = Position.cumulativeOffset(this.track);

pointer[0] -= this.offsetX + offsets[0];

pointer[1] -= this.offsetY + offsets[1];

this.event = event;

this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));

if(this.initialized && this.options.onSlide)

this.options.onSlide(this.values.length>1 ? this.values : this.value, this);

endDrag: function(event) {

if(this.active && this.dragging) {

this.finishDrag(event, true);

Event.stop(event);

}

this.active = false;

this.dragging = false;

finishDrag: function(event, success) {

this.active = false;

this.dragging = false;

this.updateFinished();

updateFinished: function() {

if(this.initialized && this.options.onChange)

this.options.onChange(this.values.length>1 ? this.values : this.value, this);

this.event = null;

}

第四个文件 prototype.js

/* Prototype JavaScript framework, version 1.5.0_rc1

* Prototype is freely distributable under the terms of an MIT-style license.

* For details, see the Prototype web site: http://prototype.conio.net/

var Prototype = {

Version: '1.5.0_rc1',

BrowserFeatures: {

XPath: !!document.evaluate

ScriptFragment: '(?:<script.*?>)(( | |.)*?)(?:</script>)',

emptyFunction: function() {},

K: function(x) { return x }

}

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

var Abstract = new Object();

Object.extend = function (destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

Object.extend(Object, {

inspect: function(object) {

try {

if (object === undefined) return 'undefined';

if (object === null) return 'null';

return object.inspect ? object.inspect() : object.toString();

} catch (e) {

if (e instanceof RangeError) return '...';

throw e;

}

keys: function(object) {

var keys = [];

for (var property in object)

keys.push(property);

return keys;

values: function(object) {

var values = [];

for (var property in object)

values.push(object[property]);

return values;

clone: function(object) {

return Object.extend({}, object);

}

} );

Function.prototype.bind = function () {

var __method = this, args = $A(arguments), object = args.shift();

return function() {

return __method.apply(object, args.concat($A(arguments)));

}

Function.prototype.bindAsEventListener = function (object) {

var __method = this, args = $A(arguments), object = args.shift();

return function(event) {

return __method.apply(object, [( event || window.event)].concat(args).concat($A(arguments)));

}

Object.extend(Number.prototype, {

toColorPart: function() {

var digits = this.toString(16);

if (this < 16) return '0' + digits;

return digits;

succ: function() {

return this + 1;

times: function(iterator) {

$R(0, this, true).each(iterator);

return this;

}

} );

var Try = {

these: function() {

var returnValue;

for (var i = 0; i < arguments.length; i++) {

var lambda = arguments[i];

try {

returnValue = lambda();

break;

} catch (e) {}

}

return returnValue;

}

var PeriodicalExecuter = Class.create();

PeriodicalExecuter.prototype = {

initialize: function(callback, frequency) {

this.callback = callback;

this.frequency = frequency;

this.currentlyExecuting = false;

this.registerCallback();

registerCallback: function() {

this.timer = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);

stop: function() {

if (!this.timer) return;

clearInterval(this.timer);

this.timer = null;

onTimerEvent: function() {

if (!this.currentlyExecuting) {

try {

this.currentlyExecuting = true;

this.callback(this);

} finally {

this.currentlyExecuting = false;

}

Object.extend(String.prototype, {

gsub: function(pattern, replacement) {

var result = '', source = this, match;

replacement = arguments.callee.prepareReplacement(replacement);

while (source.length > 0) {

if (match = source.match(pattern)) {

result += source.slice(0, match.index);

result += (replacement(match) || '').toString();

source = source.slice(match.index + match[0].length);

} else {

result += source, source = '';

}

return result;

sub: function(pattern, replacement, count) {

replacement = this.gsub.prepareReplacement(replacement);

count = count === undefined ? 1 : count;

return this.gsub(pattern, function(match) {

if (--count < 0) return match[0];

return replacement(match);

});

scan: function(pattern, iterator) {

this.gsub(pattern, iterator);

return this;

truncate: function(length, truncation) {

length = length || 30;

truncation = truncation === undefined ? '...' : truncation;

return this.length > length ?

this.slice(0, length - truncation.length) + truncation : this;

strip: function() {

return this.replace(/^s+/, '').replace(/s+$/, '');

stripTags: function() {

return this.replace(/</?[^>]+>/gi, '');

stripScripts: function() {

return this.replace(new RegExp(Prototype.ScriptFragment, 'img'), '');

extractScripts: function() {

var matchAll = new RegExp(Prototype.ScriptFragment, 'img');

var matchOne = new RegExp(Prototype.ScriptFragment, 'im');

return (this.match(matchAll) || []).map(function(scriptTag) {

return (scriptTag.match(matchOne) || ['', ''])[1];

});

evalScripts: function() {

return this.extractScripts().map(function(script) { return eval(script) });

escapeHTML: function() {

var div = document.createElement('div');

var text = document.createTextNode(this);

div.appendChild(text);

return div.innerHTML;

unescapeHTML: function() {

var div = document.createElement('div');

div.innerHTML = this.stripTags();

return div.childNodes[0] ? div.childNodes[0].nodeValue : '';

toQueryParams: function() {

var match = this.strip().match(/[^?]*$/)[0];

if (!match) return {};

var pairs = match.split('&');

return pairs.inject({}, function(params, pairString) {

var pair = pairString.split('=');

var value = pair[1] ? decodeURIComponent(pair[1]) : undefined;

params[decodeURIComponent(pair[0])] = value;

return params;

});

toArray: function() {

return this.split('');

camelize: function() {

var oStringList = this.split('-');

if (oStringList.length == 1) return oStringList[0];

var camelizedString = this.indexOf('-') == 0

? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)

: oStringList[0];

for (var i = 1, length = oStringList.length; i < length; i++) {

var s = oStringList[i];

camelizedString += s.charAt(0).toUpperCase() + s.substring(1);

}

return camelizedString;

inspect: function(useDoubleQuotes) {

var escapedString = this.replace(///g, '//');

if (useDoubleQuotes)

return '"' + escapedString.replace(/"/g, '/"') + '"';

else

return "'" + escapedString.replace(/'/g, '/'') + "'";

}

} );

String.prototype.gsub.prepareReplacement = function (replacement) {

if (typeof replacement == 'function') return replacement;

var template = new Template(replacement);

return function(match) { return template.evaluate(match) };

}

String.prototype.parseQuery = String.prototype.toQueryParams;

var Template = Class.create();

Template.Pattern = / ( ^| . | | )(# {(.*?)} ) / ;

Template.prototype = {

initialize: function(template, pattern) {

this.template = template.toString();

this.pattern = pattern || Template.Pattern;

evaluate: function(object) {

return this.template.gsub(this.pattern, function(match) {

var before = match[1];

if (before == '/') return match[2];

return before + (object[match[3]] || '').toString();

});

}

var $ break = new Object();

var $ continue = new Object();

var Enumerable = {

each: function(iterator) {

var index = 0;

try {

this._each(function(value) {

try {

iterator(value, index++);

} catch (e) {

if (e != $continue) throw e;

}

});

} catch (e) {

if (e != $break) throw e;

}

return this;

eachSlice: function(number, iterator) {

var index = -number, slices = [], array = this.toArray();

while ((index += number) < array.length)

slices.push(array.slice(index, index+number));

return slices.collect(iterator || Prototype.K);

all: function(iterator) {

var result = true;

this.each(function(value, index) {

result = result && !!(iterator || Prototype.K)(value, index);

if (!result) throw $break;

});

return result;

any: function(iterator) {

var result = false;

this.each(function(value, index) {

if (result = !!(iterator || Prototype.K)(value, index))

throw $break;

});

return result;

collect: function(iterator) {

var results = [];

this.each(function(value, index) {

results.push(iterator(value, index));

});

return results;

detect: function(iterator) {

var result;

this.each(function(value, index) {

if (iterator(value, index)) {

result = value;

throw $break;

}

});

return result;

findAll: function(iterator) {

var results = [];

this.each(function(value, index) {

if (iterator(value, index))

results.push(value);

});

return results;

grep: function(pattern, iterator) {

var results = [];

this.each(function(value, index) {

var stringValue = value.toString();

if (stringValue.match(pattern))

results.push((iterator || Prototype.K)(value, index));

})

return results;

include: function(object) {

var found = false;

this.each(function(value) {

if (value == object) {

found = true;

throw $break;

}

});

return found;

inGroupsOf: function(number, fillWith) {

fillWith = fillWith || null;

var results = this.eachSlice(number);

if (results.length > 0) (number - results.last().length).times(function() {

results.last().push(fillWith)

});

return results;

inject: function(memo, iterator) {

this.each(function(value, index) {

memo = iterator(memo, value, index);

});

return memo;

invoke: function(method) {

var args = $A(arguments).slice(1);

return this.collect(function(value) {

return value[method].apply(value, args);

});

max: function(iterator) {

var result;

this.each(function(value, index) {

value = (iterator || Prototype.K)(value, index);

if (result == undefined || value >= result)

result = value;

});

return result;

min: function(iterator) {

var result;

this.each(function(value, index) {

value = (iterator || Prototype.K)(value, index);

if (result == undefined || value < result)

result = value;

});

return result;

partition: function(iterator) {

var trues = [], falses = [];

this.each(function(value, index) {

((iterator || Prototype.K)(value, index) ?

trues : falses).push(value);

});

return [trues, falses];

pluck: function(property) {

var results = [];

this.each(function(value, index) {

results.push(value[property]);

});

return results;

reject: function(iterator) {

var results = [];

this.each(function(value, index) {

if (!iterator(value, index))

results.push(value);

});

return results;

sortBy: function(iterator) {

return this.collect(function(value, index) {

return {value: value, criteria: iterator(value, index)};

}).sort(function(left, right) {

var a = left.criteria, b = right.criteria;

return a < b ? -1 : a > b ? 1 : 0;

}).pluck('value');

toArray: function() {

return this.collect(Prototype.K);

zip: function() {

var iterator = Prototype.K, args = $A(arguments);

if (typeof args.last() == 'function')

iterator = args.pop();

var collections = [this].concat(args).map($A);

return this.map(function(value, index) {

return iterator(collections.pluck(index));

});

inspect: function() {

return '#<Enumerable:' + this.toArray().inspect() + '>';

}

Object.extend(Enumerable, {

map: Enumerable.collect,

find: Enumerable.detect,

select: Enumerable.findAll,

member: Enumerable.include,

entries: Enumerable.toArray

} );

var $A = Array.from = function (iterable) {

if (!iterable) return [];

if (iterable.toArray) {

return iterable.toArray();

} else {

var results = [];

for (var i = 0, length = iterable.length; i < length; i++)

results.push(iterable[i]);

return results;

}

Object.extend(Array.prototype, Enumerable);

if ( ! Array.prototype._reverse)

Array.prototype._reverse = Array.prototype.reverse;

Object.extend(Array.prototype, {

_each: function(iterator) {

for (var i = 0, length = this.length; i < length; i++)

iterator(this[i]);

clear: function() {

this.length = 0;

return this;

first: function() {

return this[0];

last: function() {

return this[this.length - 1];

compact: function() {

return this.select(function(value) {

return value != undefined || value != null;

});

flatten: function() {

return this.inject([], function(array, value) {

return array.concat(value && value.constructor == Array ?

value.flatten() : [value]);

});

without: function() {

var values = $A(arguments);

return this.select(function(value) {

return !values.include(value);

});

indexOf: function(object) {

for (var i = 0, length = this.length; i < length; i++)

if (this[i] == object) return i;

return -1;

reverse: function(inline) {

return (inline !== false ? this : this.toArray())._reverse();

reduce: function() {

return this.length > 1 ? this : this[0];

uniq: function() {

return this.inject([], function(array, value) {

return array.include(value) ? array : array.concat([value]);

});

clone: function() {

return [].concat(this);

inspect: function() {

return '[' + this.map(Object.inspect).join(', ') + ']';

}

} );

Array.prototype.toArray = Array.prototype.clone;

var Hash = {

_each: function(iterator) {

for (var key in this) {

var value = this[key];

if (typeof value == 'function') continue;

var pair = [key, value];

pair.key = key;

pair.value = value;

iterator(pair);

}

keys: function() {

return this.pluck('key');

values: function() {

return this.pluck('value');

merge: function(hash) {

return $H(hash).inject(this, function(mergedHash, pair) {

mergedHash[pair.key] = pair.value;

return mergedHash;

});

toQueryString: function() {

return this.map(function(pair) {

if (!pair.value && pair.value !== 0) pair[1] = '';

if (!pair.key) return;

return pair.map(encodeURIComponent).join('=');

}).join('&');

inspect: function() {

return '#<Hash:{' + this.map(function(pair) {

return pair.map(Object.inspect).join(': ');

}).join(', ') + '}>';

}

function $H(object) {

var hash = Object.extend({}, object || {});

Object.extend(hash, Enumerable);

Object.extend(hash, Hash);

return hash;

}

ObjectRange = Class.create();

Object.extend(ObjectRange.prototype, Enumerable);

Object.extend(ObjectRange.prototype, {

initialize: function(start, end, exclusive) {

this.start = start;

this.end = end;

this.exclusive = exclusive;

_each: function(iterator) {

var value = this.start;

while (this.include(value)) {

iterator(value);

value = value.succ();

}

include: function(value) {

if (value < this.start)

return false;

if (this.exclusive)

return value < this.end;

return value <= this.end;

}

} );

var $R = function (start, end, exclusive) {

return new ObjectRange(start, end, exclusive);

}

var Ajax = {

getTransport: function() {

return Try.these(

function() {return new XMLHttpRequest()},

function() {return new ActiveXObject('Msxml2.XMLHTTP')},

function() {return new ActiveXObject('Microsoft.XMLHTTP')}

) || false;

activeRequestCount: 0

}

Ajax.Responders = {

responders: [],

_each: function(iterator) {

this.responders._each(iterator);

if (!this.include(responder))

this.responders.push(responder);

unregister: function(responder) {

this.responders = this.responders.without(responder);

dispatch: function(callback, request, transport, json) {

this.each(function(responder) {

if (typeof responder[callback] == 'function') {

try {

responder[callback].apply(responder, [request, transport, json]);

} catch (e) {}

}

});

}

} ;

Object.extend(Ajax.Responders, Enumerable);

Ajax.Responders.register( {

onCreate: function() {

Ajax.activeRequestCount++;

onComplete: function() {

Ajax.activeRequestCount--;

}

} );

Ajax.Base = function () {} ;

Ajax.Base.prototype = {

setOptions: function(options) {

this.options = {

method: 'post',

asynchronous: true,

contentType: 'application/x-www-form-urlencoded',

encoding: 'UTF-8',

parameters: ''

}

Object.extend(this.options, options || {});

this.options.method = this.options.method.toLowerCase();

this.options.parameters = $H(typeof this.options.parameters == 'string' ?

this.options.parameters.toQueryParams() : this.options.parameters);

}

Ajax.Request = Class.create();

Ajax.Request.Events =

[ ' Uninitialized ' , ' Loading ' , ' Loaded ' , ' Interactive ' , ' Complete ' ];

Ajax.Request.prototype = Object.extend( new Ajax.Base(), {

initialize: function(url, options) {

this.transport = Ajax.getTransport();

this.setOptions(options);

this.request(url);

request: function(url) {

var params = this.options.parameters;

if (params.any()) params['_'] = '';

if (!['get', 'post'].include(this.options.method)) {

// simulate other verbs over post

params['_method'] = this.options.method;

this.options.method = 'post';

}

this.url = url;

// when GET, append parameters to URL

if (this.options.method == 'get' && params.any())

this.url += (this.url.indexOf('?') >= 0 ? '&' : '?') +

params.toQueryString();

try {

Ajax.Responders.dispatch('onCreate', this, this.transport);

this.transport.open(this.options.method.toUpperCase(), this.url,

this.options.asynchronous, this.options.username,

this.options.password);

if (this.options.asynchronous)

setTimeout(function() { this.respondToReadyState(1) }.bind(this), 10);

this.transport.onreadystatechange = this.onStateChange.bind(this);

this.setRequestHeaders();

var body = this.options.method == 'post' ?

(this.options.postBody || params.toQueryString()) : null;

this.transport.send(body);

/* Force Firefox to handle ready state 4 for synchronous requests */

if (!this.options.asynchronous && this.transport.overrideMimeType)

this.onStateChange();

}

catch (e) {

this.dispatchException(e);

}

onStateChange: function() {

var readyState = this.transport.readyState;

if (readyState > 1)

this.respondToReadyState(this.transport.readyState);

setRequestHeaders: function() {

var headers = {

'X-Requested-With': 'XMLHttpRequest',

'X-Prototype-Version': Prototype.Version,

'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'

};

if (this.options.method == 'post') {

headers['Content-type'] = this.options.contentType +

(this.options.encoding ? '; charset=' + this.options.encoding : '');

/* Force "Connection: close" for older Mozilla browsers to work

* around a bug where XMLHttpRequest sends an incorrect

* Content-length header. See Mozilla Bugzilla #246651.

if (this.transport.overrideMimeType &&

(navigator.userAgent.match(/Gecko/(d{4})/) || [0,2005])[1] < 2005)

headers['Connection'] = 'close';

}

// user-defined headers

if (typeof this.options.requestHeaders == 'object') {

var extras = this.options.requestHeaders;

if (typeof extras.push == 'function')

for (var i = 0; i < extras.length; i += 2)

headers[extras[i]] = extras[i+1];

else

$H(extras).each(function(pair) { headers[pair.key] = pair.value });

}

for (var name in headers)

this.transport.setRequestHeader(name, headers[name]);

success: function() {

return !this.transport.status

|| (this.transport.status >= 200 && this.transport.status < 300);

respondToReadyState: function(readyState) {

var state = Ajax.Request.Events[readyState];

var transport = this.transport, json = this.evalJSON();

if (state == 'Complete') {

try {

(this.options['on' + this.transport.status]

|| this.options['on' + (this.success() ? 'Success' : 'Failure')]

|| Prototype.emptyFunction)(transport, json);

} catch (e) {

this.dispatchException(e);

}

try {

(this.options['on' + state] || Prototype.emptyFunction)(transport, json);

Ajax.Responders.dispatch('on' + state, this, transport, json);

} catch (e) {

this.dispatchException(e);

}

if (state == 'Complete') {

if ((this.getHeader('Content-type') || '').strip().

match(/^(text|application)/(x-)?(java|ecma)script(;.*)?$/i))

this.evalResponse();

// avoid memory leak in MSIE: clean up

this.transport.onreadystatechange = Prototype.emptyFunction;

}

getHeader: function(name) {

try {

return this.transport.getResponseHeader(name);

} catch (e) { return null }

evalJSON: function() {

try {

var json = this.getHeader('X-JSON');

return json ? eval('(' + json + ')') : null;

} catch (e) { return null }

evalResponse: function() {

try {

return eval(this.transport.responseText);

} catch (e) {

this.dispatchException(e);

}

dispatchException: function(exception) {

(this.options.onException || Prototype.emptyFunction)(this, exception);

Ajax.Responders.dispatch('onException', this, exception);

}

} );

Ajax.Updater = Class.create();

Object.extend(Object.extend(Ajax.Updater.prototype, Ajax.Request.prototype), {

initialize: function(container, url, options) {

this.container = {

success: (container.success || container),

failure: (container.failure || (container.success ? null : container))

}

this.transport = Ajax.getTransport();

this.setOptions(options);

var onComplete = this.options.onComplete || Prototype.emptyFunction;

this.options.onComplete = (function(transport, param) {

this.updateContent();

onComplete(transport, param);

}).bind(this);

this.request(url);

updateContent: function() {

var receiver = this.container[this.success() ? 'success' : 'failure'];

var response = this.transport.responseText;

if (!this.options.evalScripts) response = response.stripScripts();

if (receiver = $(receiver)) {

if (this.options.insertion)

new this.options.insertion(receiver, response);

else

receiver.update(response);

}

if (this.success()) {

if (this.onComplete)

setTimeout(this.onComplete.bind(this), 10);

}

} );

Ajax.PeriodicalUpdater = Class.create();

Ajax.PeriodicalUpdater.prototype = Object.extend( new Ajax.Base(), {

initialize: function(container, url, options) {

this.setOptions(options);

this.onComplete = this.options.onComplete;

this.frequency = (this.options.frequency || 2);

this.decay = (this.options.decay || 1);

this.updater = {};

this.container = container;

this.url = url;

this.start();

start: function() {

this.options.onComplete = this.updateComplete.bind(this);

this.onTimerEvent();

stop: function() {

this.updater.options.onComplete = undefined;

clearTimeout(this.timer);

(this.onComplete || Prototype.emptyFunction).apply(this, arguments);

updateComplete: function(request) {

if (this.options.decay) {

this.decay = (request.responseText == this.lastText ?

this.decay * this.options.decay : 1);

this.lastText = request.responseText;

}

this.timer = setTimeout(this.onTimerEvent.bind(this),

this.decay * this.frequency * 1000);

onTimerEvent: function() {

this.updater = new Ajax.Updater(this.container, this.url, this.options);

}

} );

function $(element) {

if (arguments.length > 1) {

for (var i = 0, elements = [], length = arguments.length; i < length; i++)

elements.push($(arguments[i]));

return elements;

}

if (typeof element == 'string')

element = document.getElementById(element);

return Element.extend(element);

}

if (Prototype.BrowserFeatures.XPath) {

document._getElementsByXPath = function(expression, parentElement) {

var results = [];

var query = document.evaluate(expression, $(parentElement) || document,

null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

for (var i = 0, len = query.snapshotLength; i < len; i++)

results.push(query.snapshotItem(i));

return results;

}

document.getElementsByClassName = function (className, parentElement) {

if (Prototype.BrowserFeatures.XPath) {

var q = ".//*[contains(concat(' ', @class, ' '), ' " + className + " ')]";

return document._getElementsByXPath(q, parentElement);

} else {

var children = ($(parentElement) || document.body).getElementsByTagName('*');

var elements = [], child;

for (var i = 0, length = children.length; i < length; i++) {

child = children[i];

if (Element.hasClassName(child, className))

elements.push(Element.extend(child));

}

return elements;

}

if ( ! window.Element)

var Element = new Object();

Element.extend = function (element) {

if (!element) return;

if (_nativeExtensions || element.nodeType == 3) return element;

if (!element._extended && element.tagName && element != window) {

var methods = Object.clone(Element.Methods), cache = Element.extend.cache;

if (element.tagName == 'FORM')

Object.extend(methods, Form.Methods);

if (['INPUT', 'TEXTAREA', 'SELECT'].include(element.tagName))

Object.extend(methods, Form.Element.Methods);

for (var property in methods) {

var value = methods[property];

if (typeof value == 'function')

element[property] = cache.findOrStore(value);

}

var methods = Object.clone(Element.Methods.Simulated), cache = Element.extend.cache;

for (var property in methods) {

var value = methods[property];

if ('function' == typeof value && !(property in element))

element[property] = cache.findOrStore(value);

}

element._extended = true;

return element;

}

Element.extend.cache = {

findOrStore: function(value) {

return this[value] = this[value] || function() {

return value.apply(null, [this].concat($A(arguments)));

}

Element.Methods = {

visible: function(element) {

return $(element).style.display != 'none';

toggle: function(element) {

element = $(element);

Element[Element.visible(element) ? 'hide' : 'show'](element);

return element;

hide: function(element) {

$(element).style.display = 'none';

return element;

show: function(element) {

$(element).style.display = '';

return element;

remove: function(element) {

element = $(element);

element.parentNode.removeChild(element);

return element;

update: function(element, html) {

html = typeof html == 'undefined' ? '' : html.toString();

$(element).innerHTML = html.stripScripts();

setTimeout(function() {html.evalScripts()}, 10);

return element;

replace: function(element, html) {

element = $(element);

if (element.outerHTML) {

element.outerHTML = html.stripScripts();

} else {

var range = element.ownerDocument.createRange();

range.selectNodeContents(element);

element.parentNode.replaceChild(

range.createContextualFragment(html.stripScripts()), element);

}

setTimeout(function() {html.evalScripts()}, 10);

return element;

inspect: function(element) {

element = $(element);

var result = '<' + element.tagName.toLowerCase();

$H({'id': 'id', 'className': 'class'}).each(function(pair) {

var property = pair.first(), attribute = pair.last();

var value = (element[property] || '').toString();

if (value) result += ' ' + attribute + '=' + value.inspect(true);

});

return result + '>';

recursivelyCollect: function(element, property) {

element = $(element);

var elements = [];

while (element = element[property])

if (element.nodeType == 1)

elements.push(Element.extend(element));

return elements;

ancestors: function(element) {

return $(element).recursivelyCollect('parentNode');

descendants: function(element) {

element = $(element);

return $A(element.getElementsByTagName('*'));

previousSiblings: function(element) {

return $(element).recursivelyCollect('previousSibling');

nextSiblings: function(element) {

return $(element).recursivelyCollect('nextSibling');

siblings: function(element) {

element = $(element);

return element.previousSiblings().reverse().concat(element.nextSiblings());

match: function(element, selector) {

element = $(element);

if (typeof selector == 'string')

selector = new Selector(selector);

return selector.match(element);

up: function(element, expression, index) {

return Selector.findElement($(element).ancestors(), expression, index);

down: function(element, expression, index) {

return Selector.findElement($(element).descendants(), expression, index);

previous: function(element, expression, index) {

return Selector.findElement($(element).previousSiblings(), expression, index);

next: function(element, expression, index) {

return Selector.findElement($(element).nextSiblings(), expression, index);

getElementsBySelector: function() {

var args = $A(arguments), element = $(args.shift());

return Selector.findChildElements(element, args);

getElementsByClassName: function(element, className) {

element = $(element);

return document.getElementsByClassName(className, element);

getHeight: function(element) {

element = $(element);

return element.offsetHeight;

classNames: function(element) {

return new Element.ClassNames(element);

hasClassName: function(element, className) {

if (!(element = $(element))) return;

var elementClassName = element.className;

if (elementClassName.length == 0) return false;

if (elementClassName == className ||

elementClassName.match(new RegExp("(^|/s)" + className + "(/s|$)")))

return true;

return false;

addClassName: function(element, className) {

if (!(element = $(element))) return;

Element.classNames(element).add(className);

return element;

removeClassName: function(element, className) {

if (!(element = $(element))) return;

Element.classNames(element).remove(className);

return element;

observe: function() {

Event.observe.apply(Event, arguments);

return $A(arguments).first();

stopObserving: function() {

Event.stopObserving.apply(Event, arguments);

return $A(arguments).first();

// removes whitespace-only text node children

cleanWhitespace: function(element) {

element = $(element);

var node = element.firstChild;

while (node) {

var nextNode = node.nextSibling;

if (node.nodeType == 3 && !/S/.test(node.nodeValue))

element.removeChild(node);

node = nextNode;

}

return element;

empty: function(element) {

return $(element).innerHTML.match(/^s*$/);

childOf: function(element, ancestor) {

element = $(element), ancestor = $(ancestor);

while (element = element.parentNode)

if (element == ancestor) return true;

return false;

scrollTo: function(element) {

element = $(element);

var x = element.x ? element.x : element.offsetLeft,

y = element.y ? element.y : element.offsetTop;

window.scrollTo(x, y);

return element;

getStyle: function(element, style) {

element = $(element);

var value = element.style[style.camelize()];

if (!value) {

if (document.defaultView && document.defaultView.getComputedStyle) {

var css = document.defaultView.getComputedStyle(element, null);

value = css ? css.getPropertyValue(style) : null;

} else if (element.currentStyle) {

value = element.currentStyle[style.camelize()];

}

if (window.opera && ['left', 'top', 'right', 'bottom'].include(style))

if (Element.getStyle(element, 'position') == 'static') value = 'auto';

return value == 'auto' ? null : value;

setStyle: function(element, style) {

element = $(element);

for (var name in style)

element.style[name.camelize()] = style[name];

return element;

getDimensions: function(element) {

element = $(element);

if (Element.getStyle(element, 'display') != 'none')

return {width: element.offsetWidth, height: element.offsetHeight};

// All *Width and *Height properties give 0 on elements with display none,

// so enable the element temporarily

var els = element.style;

var originalVisibility = els.visibility;

var originalPosition = els.position;

els.visibility = 'hidden';

els.position = 'absolute';

els.display = '';

var originalWidth = element.clientWidth;

var originalHeight = element.clientHeight;

els.display = 'none';

els.position = originalPosition;

els.visibility = originalVisibility;

return {width: originalWidth, height: originalHeight};

makePositioned: function(element) {

element = $(element);

var pos = Element.getStyle(element, 'position');

if (pos == 'static' || !pos) {

element._madePositioned = true;

element.style.position = 'relative';

// Opera returns the offset relative to the positioning context, when an

// element is position relative but top and left have not been defined

if (window.opera) {

element.style.top = 0;

element.style.left = 0;

}

return element;

undoPositioned: function(element) {

element = $(element);

if (element._madePositioned) {

element._madePositioned = undefined;

element.style.position =

element.style.top =

element.style.left =

element.style.bottom =

element.style.right = '';

}

return element;

makeClipping: function(element) {

element = $(element);

if (element._overflow) return element;

element._overflow = element.style.overflow || 'auto';

if ((Element.getStyle(element, 'overflow') || 'visible') != 'hidden')

element.style.overflow = 'hidden';

return element;

undoClipping: function(element) {

element = $(element);

if (!element._overflow) return element;

element.style.overflow = element._overflow == 'auto' ? '' : element._overflow;

element._overflow = null;

return element;

}

Element.Methods.Simulated = {

hasAttribute: function(element, attribute) {

return $(element).getAttributeNode(attribute).specified;

}

// IE is missing .innerHTML support for TABLE-related elements

if (document.all) {

Element.Methods.update = function(element, html) {

element = $(element);

html = typeof html == 'undefined' ? '' : html.toString();

var tagName = element.tagName.toUpperCase();

if (['THEAD','TBODY','TR','TD'].indexOf(tagName) > -1) {

var div = document.createElement('div');

switch (tagName) {

case 'THEAD':

case 'TBODY':

div.innerHTML = '<table><tbody>' + html.stripScripts() + '</tbody></table>';

depth = 2;

break;

case 'TR':

div.innerHTML = '<table><tbody><tr>' + html.stripScripts() + '</tr></tbody></table>';

depth = 3;

break;

case 'TD':

div.innerHTML = '<table><tbody><tr><td>' + html.stripScripts() + '</td></tr></tbody></table>';

depth = 4;

}

$A(element.childNodes).each(function(node){

element.removeChild(node)

});

depth.times(function(){ div = div.firstChild });

$A(div.childNodes).each(

function(node){ element.appendChild(node) });

} else {

element.innerHTML = html.stripScripts();

}

setTimeout(function() {html.evalScripts()}, 10);

return element;

}

Object.extend(Element, Element.Methods);

var _nativeExtensions = false ;

if ( / Konqueror | Safari | KHTML / .test(navigator.userAgent))

[ '' , ' Form ' , ' Input ' , ' TextArea ' , ' Select ' ].each( function (tag) {

var className = 'HTML' + tag + 'Element';

if(window[className]) return;

var klass = window[className] = {};

klass.prototype = document.createElement(tag ? tag.toLowerCase() : 'div').__proto__;

} );

Element.addMethods = function (methods) {

Object.extend(Element.Methods, methods || {});

function copy(methods, destination, onlyIfAbsent) {

onlyIfAbsent = onlyIfAbsent || false;

var cache = Element.extend.cache;

for (var property in methods) {

var value = methods[property];

if (!onlyIfAbsent || !(property in destination))

destination[property] = cache.findOrStore(value);

}

if (typeof HTMLElement != 'undefined') {

copy(Element.Methods, HTMLElement.prototype);

copy(Element.Methods.Simulated, HTMLElement.prototype, true);

copy(Form.Methods, HTMLFormElement.prototype);

[HTMLInputElement, HTMLTextAreaElement, HTMLSelectElement].each(function(klass) {

copy(Form.Element.Methods, klass.prototype);

});

_nativeExtensions = true;

}

var Toggle = new Object();

Toggle.display = Element.toggle;

Abstract.Insertion = function (adjacency) {

this.adjacency = adjacency;

}

Abstract.Insertion.prototype = {

initialize: function(element, content) {

this.element = $(element);

this.content = content.stripScripts();

if (this.adjacency && this.element.insertAdjacentHTML) {

try {

this.element.insertAdjacentHTML(this.adjacency, this.content);

} catch (e) {

var tagName = this.element.tagName.toLowerCase();

if (tagName == 'tbody' || tagName == 'tr') {

this.insertContent(this.contentFromAnonymousTable());

} else {

throw e;

}

} else {

this.range = this.element.ownerDocument.createRange();

if (this.initializeRange) this.initializeRange();

this.insertContent([this.range.createContextualFragment(this.content)]);

}

setTimeout(function() {content.evalScripts()}, 10);

contentFromAnonymousTable: function() {

var div = document.createElement('div');

div.innerHTML = '<table><tbody>' + this.content + '</tbody></table>';

return $A(div.childNodes[0].childNodes[0].childNodes);

}

var Insertion = new Object();

Insertion.Before = Class.create();

Insertion.Before.prototype = Object.extend( new Abstract.Insertion( ' beforeBegin ' ), {

initializeRange: function() {

this.range.setStartBefore(this.element);

insertContent: function(fragments) {

fragments.each((function(fragment) {

this.element.parentNode.insertBefore(fragment, this.element);

}).bind(this));

}

} );

Insertion.Top = Class.create();

Insertion.Top.prototype = Object.extend( new Abstract.Insertion( ' afterBegin ' ), {

initializeRange: function() {

this.range.selectNodeContents(this.element);

this.range.collapse(true);

insertContent: function(fragments) {

fragments.reverse(false).each((function(fragment) {

this.element.insertBefore(fragment, this.element.firstChild);

}).bind(this));

}

} );

Insertion.Bottom = Class.create();

Insertion.Bottom.prototype = Object.extend( new Abstract.Insertion( ' beforeEnd ' ), {

initializeRange: function() {

this.range.selectNodeContents(this.element);

this.range.collapse(this.element);

insertContent: function(fragments) {

fragments.each((function(fragment) {

this.element.appendChild(fragment);

}).bind(this));

}

} );

Insertion.After = Class.create();

Insertion.After.prototype = Object.extend( new Abstract.Insertion( ' afterEnd ' ), {

initializeRange: function() {

this.range.setStartAfter(this.element);

insertContent: function(fragments) {

fragments.each((function(fragment) {

this.element.parentNode.insertBefore(fragment,

this.element.nextSibling);

}).bind(this));

}

} );

/*--------------------------------------------------------------------------*/

Element.ClassNames = Class.create();

Element.ClassNames.prototype = {

initialize: function(element) {

this.element = $(element);

_each: function(iterator) {

this.element.className.split(/s+/).select(function(name) {

return name.length > 0;

})._each(iterator);

set: function(className) {

this.element.className = className;

add: function(classNameToAdd) {

if (this.include(classNameToAdd)) return;

this.set($A(this).concat(classNameToAdd).join(' '));

remove: function(classNameToRemove) {

if (!this.include(classNameToRemove)) return;

this.set($A(this).without(classNameToRemove).join(' '));

toString: function() {

return $A(this).join(' ');

}

Object.extend(Element.ClassNames.prototype, Enumerable);

var Selector = Class.create();

Selector.prototype = {

initialize: function(expression) {

this.params = {classNames: []};

this.expression = expression.toString().strip();

this.parseExpression();

this.compileMatcher();

parseExpression: function() {

function abort(message) { throw 'Parse error in selector: ' + message; }

if (this.expression == '') abort('empty expression');

var params = this.params, expr = this.expression, match, modifier, clause, rest;

while (match = expr.match(/^(.*)[([a-z0-9_:-]+?)(?:([~|!]?=)(?:"([^"]*)"|([^]s]*)))?]$/i)) {

params.attributes = params.attributes || [];

params.attributes.push({name: match[2], operator: match[3], value: match[4] || match[5] || ''});

expr = match[1];

}

if (expr == '*') return this.params.wildcard = true;

while (match = expr.match(/^([^a-z0-9_-])?([a-z0-9_-]+)(.*)/i)) {

modifier = match[1], clause = match[2], rest = match[3];

switch (modifier) {

case '#': params.id = clause; break;

case '.': params.classNames.push(clause); break;

case '':

case undefined: params.tagName = clause.toUpperCase(); break;

default: abort(expr.inspect());

}

expr = rest;

}

if (expr.length > 0) abort(expr.inspect());

buildMatchExpression: function() {

var params = this.params, conditions = [], clause;

if (params.wildcard)

conditions.push('true');

if (clause = params.id)

conditions.push('element.id == ' + clause.inspect());

if (clause = params.tagName)

conditions.push('element.tagName.toUpperCase() == ' + clause.inspect());

if ((clause = params.classNames).length > 0)

for (var i = 0; i < clause.length; i++)

conditions.push('Element.hasClassName(element, ' + clause[i].inspect() + ')');

if (clause = params.attributes) {

clause.each(function(attribute) {

var value = 'element.getAttribute(' + attribute.name.inspect() + ')';

var splitValueBy = function(delimiter) {

return value + ' && ' + value + '.split(' + delimiter.inspect() + ')';

}

switch (attribute.operator) {

case '=': conditions.push(value + ' == ' + attribute.value.inspect()); break;

case '~=': conditions.push(splitValueBy(' ') + '.include(' + attribute.value.inspect() + ')'); break;

case '|=': conditions.push(

splitValueBy('-') + '.first().toUpperCase() == ' + attribute.value.toUpperCase().inspect()

); break;

case '!=': conditions.push(value + ' != ' + attribute.value.inspect()); break;

case '':

case undefined: conditions.push(value + ' != null'); break;

default: throw 'Unknown operator ' + attribute.operator + ' in selector';

}

});

}

return conditions.join(' && ');

compileMatcher: function() {

this.match = new Function('element', 'if (!element.tagName) return false;

return ' + this.buildMatchExpression());

findElements: function(scope) {

var element;

if (element = $(this.params.id))

if (this.match(element))

if (!scope || Element.childOf(element, scope))

return [element];

scope = (scope || document).getElementsByTagName(this.params.tagName || '*');

var results = [];

for (var i = 0, length = scope.length; i < length; i++)

if (this.match(element = scope[i]))

results.push(Element.extend(element));

return results;

toString: function() {

return this.expression;

}

Object.extend(Selector, {

matchElements: function(elements, expression) {

var selector = new Selector(expression);

return elements.select(selector.match.bind(selector)).collect(Element.extend);

findElement: function(elements, expression, index) {

if (typeof expression == 'number') index = expression, expression = false;

return Selector.matchElements(elements, expression || '*')[index || 0];

findChildElements: function(element, expressions) {

return expressions.map(function(expression) {

return expression.strip().split(/s+/).inject([null], function(results, expr) {

var selector = new Selector(expr);

return results.inject([], function(elements, result) {

return elements.concat(selector.findElements(result || element));

});

}).flatten();

}

});

function $$() {

return Selector.findChildElements(document, $A(arguments));

}

var Form = {

reset: function(form) {

$(form).reset();

return form;

serializeElements: function(elements) {

return elements.inject([], function(queryComponents, element) {

var queryComponent = Form.Element.serialize(element);

if (queryComponent) queryComponents.push(queryComponent);

return queryComponents;

}).join('&');

}

};

Form.Methods = {

serialize: function(form) {

return Form.serializeElements($(form).getElements());

getElements: function(form) {

return $A($(form).getElementsByTagName('*')).inject([],

function(elements, child) {

if (Form.Element.Serializers[child.tagName.toLowerCase()])

elements.push(Element.extend(child));

return elements;

}

);

getInputs: function(form, typeName, name) {

form = $(form);

var inputs = form.getElementsByTagName('input');

if (!typeName && !name)

return inputs;

var matchingInputs = new Array();

for (var i = 0, length = inputs.length; i < length; i++) {

var input = inputs[i];

if ((typeName && input.type != typeName) ||

(name && input.name != name))

continue;

matchingInputs.push(Element.extend(input));

}

return matchingInputs;

disable: function(form) {

form = $(form);

form.getElements().each(function(element) {

element.blur();

element.disabled = 'true';

});

return form;

enable: function(form) {

form = $(form);

form.getElements().each(function(element) {

element.disabled = '';

});

return form;

findFirstElement: function(form) {

return $(form).getElements().find(function(element) {

return element.type != 'hidden' && !element.disabled &&

['input', 'select', 'textarea'].include(element.tagName.toLowerCase());

});

focusFirstElement: function(form) {

form = $(form);

form.findFirstElement().activate();

return form;

}

Object.extend(Form, Form.Methods);

Form.Element = {

focus: function(element) {

$(element).focus();

return element;

select: function(element) {

$(element).select();

return element;

}

Form.Element.Methods = {

serialize: function(element) {

element = $(element);

if (element.disabled) return '';

var method = element.tagName.toLowerCase();

var parameter = Form.Element.Serializers[method](element);

if (parameter) {

var key = encodeURIComponent(parameter[0]);

if (key.length == 0) return;

if (parameter[1].constructor != Array)

parameter[1] = [parameter[1]];

return parameter[1].map(function(value) {

return key + '=' + encodeURIComponent(value);

}).join('&');

}

getValue: function(element) {

element = $(element);

var method = element.tagName.toLowerCase();

var parameter = Form.Element.Serializers[method](element);

if (parameter)

return parameter[1];

clear: function(element) {

$(element).value = '';

return element;

present: function(element) {

return $(element).value != '';

activate: function(element) {

element = $(element);

element.focus();

if (element.select)

element.select();

return element;

disable: function(element) {

element = $(element);

element.disabled = true;

return element;

enable: function(element) {

element = $(element);

element.blur();

element.disabled = false;

return element;

}

Object.extend(Form.Element, Form.Element.Methods);

var Field = Form.Element;

Form.Element.Serializers = {

input: function(element) {

switch (element.type.toLowerCase()) {

case 'checkbox':

case 'radio':

return Form.Element.Serializers.inputSelector(element);

default:

return Form.Element.Serializers.textarea(element);

}

return false;

inputSelector: function(element) {

if (element.checked)

return [element.name, element.value];

textarea: function(element) {

return [element.name, element.value];

select: function(element) {

return Form.Element.Serializers[element.type == 'select-one' ?

'selectOne' : 'selectMany'](element);

selectOne: function(element) {

var value = '', opt, index = element.selectedIndex;

if (index >= 0) {

opt = Element.extend(element.options[index]);

// Uses the new potential extension if hasAttribute isn't native.

value = opt.hasAttribute('value') ? opt.value : opt.text;

}

return [element.name, value];

selectMany: function(element) {

var value = [];

for (var i = 0; i < element.length; i++) {

var opt = Element.extend(element.options[i]);

if (opt.selected)

// Uses the new potential extension if hasAttribute isn't native.

value.push(opt.hasAttribute('value') ? opt.value : opt.text);

}

return [element.name, value];

}

var $F = Form.Element.getValue;

Abstract.TimedObserver = function() {}

Abstract.TimedObserver.prototype = {

initialize: function(element, frequency, callback) {

this.frequency = frequency;

this.element = $(element);

this.callback = callback;

this.lastValue = this.getValue();

this.registerCallback();

registerCallback: function() {

setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);

onTimerEvent: function() {

var value = this.getValue();

if (this.lastValue != value) {

this.callback(this.element, value);

this.lastValue = value;

}

Form.Element.Observer = Class.create();

Form.Element.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {

getValue: function() {

return Form.Element.getValue(this.element);

}

});

Form.Observer = Class.create();

Form.Observer.prototype = Object.extend(new Abstract.TimedObserver(), {

getValue: function() {

return Form.serialize(this.element);

}

});

/*--------------------------------------------------------------------------*/

Abstract.EventObserver = function() {}

Abstract.EventObserver.prototype = {

initialize: function(element, callback) {

this.element = $(element);

this.callback = callback;

this.lastValue = this.getValue();

if (this.element.tagName.toLowerCase() == 'form')

this.registerFormCallbacks();

else

this.registerCallback(this.element);

onElementEvent: function() {

var value = this.getValue();

if (this.lastValue != value) {

this.callback(this.element, value);

this.lastValue = value;

}

registerFormCallbacks: function() {

Form.getElements(this.element).each(this.registerCallback.bind(this));

registerCallback: function(element) {

if (element.type) {

switch (element.type.toLowerCase()) {

case 'checkbox':

case 'radio':

Event.observe(element, 'click', this.onElementEvent.bind(this));

break;

default:

Event.observe(element, 'change', this.onElementEvent.bind(this));

break;

}

Form.Element.EventObserver = Class.create();

Form.Element.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {

getValue: function() {

return Form.Element.getValue(this.element);

}

});

Form.EventObserver = Class.create();

Form.EventObserver.prototype = Object.extend(new Abstract.EventObserver(), {

getValue: function() {

return Form.serialize(this.element);

}

});

if (!window.Event) {

var Event = new Object();

}

Object.extend(Event, {

KEY_BACKSPACE: 8,

KEY_TAB: 9,

KEY_RETURN: 13,

KEY_ESC: 27,

KEY_LEFT: 37,

KEY_UP: 38,

KEY_RIGHT: 39,

KEY_DOWN: 40,

KEY_DELETE: 46,

KEY_HOME: 36,

KEY_END: 35,

KEY_PAGEUP: 33,

KEY_PAGEDOWN: 34,

element: function(event) {

return event.target || event.srcElement;

isLeftClick: function(event) {

return (((event.which) && (event.which == 1)) ||

((event.button) && (event.button == 1)));

pointerX: function(event) {

return event.pageX || (event.clientX +

(document.documentElement.scrollLeft || document.body.scrollLeft));

pointerY: function(event) {

return event.pageY || (event.clientY +

(document.documentElement.scrollTop || document.body.scrollTop));

stop: function(event) {

if (event.preventDefault) {

event.preventDefault();

event.stopPropagation();

} else {

event.returnValue = false;

event.cancelBubble = true;

}

// find the first node with the given tagName, starting from the

// node the event was triggered on; traverses the DOM upwards

findElement: function(event, tagName) {

var element = Event.element(event);

while (element.parentNode && (!element.tagName ||

(element.tagName.toUpperCase() != tagName.toUpperCase())))

element = element.parentNode;

return element;

observers: false,

_observeAndCache: function(element, name, observer, useCapture) {

if (!this.observers) this.observers = [];

if (element.addEventListener) {

this.observers.push([element, name, observer, useCapture]);

element.addEventListener(name, observer, useCapture);

} else if (element.attachEvent) {

this.observers.push([element, name, observer, useCapture]);

element.attachEvent('on' + name, observer);

}

unloadCache: function() {

if (!Event.observers) return;

for (var i = 0, length = Event.observers.length; i < length; i++) {

Event.stopObserving.apply(this, Event.observers[i]);

Event.observers[i][0] = null;

}

Event.observers = false;

observe: function(element, name, observer, useCapture) {

element = $(element);

useCapture = useCapture || false;

if (name == 'keypress' &&

(navigator.appVersion.match(/Konqueror|Safari|KHTML/)

|| element.attachEvent))

name = 'keydown';

Event._observeAndCache(element, name, observer, useCapture);

stopObserving: function(element, name, observer, useCapture) {

element = $(element);

useCapture = useCapture || false;

if (name == 'keypress' &&

(navigator.appVersion.match(/Konqueror|Safari|KHTML/)

|| element.detachEvent))

name = 'keydown';

if (element.removeEventListener) {

element.removeEventListener(name, observer, useCapture);

} else if (element.detachEvent) {

try {

element.detachEvent('on' + name, observer);

} catch (e) {}

}

});

/* prevent memory leaks in IE */

if (navigator.appVersion.match(/MSIE/))

Event.observe(window, 'unload', Event.unloadCache, false);

var Position = {

includeScrollOffsets: false,

prepare: function() {

this.deltaX = window.pageXOffset

|| document.documentElement.scrollLeft

|| document.body.scrollLeft

|| 0;

this.deltaY = window.pageYOffset

|| document.documentElement.scrollTop

|| document.body.scrollTop

|| 0;

realOffset: function(element) {

var valueT = 0, valueL = 0;

do {

valueT += element.scrollTop || 0;

valueL += element.scrollLeft || 0;

element = element.parentNode;

} while (element);

return [valueL, valueT];

cumulativeOffset: function(element) {

var valueT = 0, valueL = 0;

do {

valueT += element.offsetTop || 0;

valueL += element.offsetLeft || 0;

element = element.offsetParent;

} while (element);

return [valueL, valueT];

positionedOffset: function(element) {

var valueT = 0, valueL = 0;

do {

valueT += element.offsetTop || 0;

valueL += element.offsetLeft || 0;

element = element.offsetParent;

if (element) {

if(element.tagName=='BODY') break;

var p = Element.getStyle(element, 'position');

if (p == 'relative' || p == 'absolute') break;

}

} while (element);

return [valueL, valueT];

offsetParent: function(element) {

if (element.offsetParent) return element.offsetParent;

if (element == document.body) return element;

while ((element = element.parentNode) && element != document.body)

if (Element.getStyle(element, 'position') != 'static')

return element;

return document.body;

within: function(element, x, y) {

if (this.includeScrollOffsets)

return this.withinIncludingScrolloffsets(element, x, y);

this.xcomp = x;

this.ycomp = y;

this.offset = this.cumulativeOffset(element);

return (y >= this.offset[1] &&

y < this.offset[1] + element.offsetHeight &&

x >= this.offset[0] &&

x < this.offset[0] + element.offsetWidth);

withinIncludingScrolloffsets: function(element, x, y) {

var offsetcache = this.realOffset(element);

this.xcomp = x + offsetcache[0] - this.deltaX;

this.ycomp = y + offsetcache[1] - this.deltaY;

this.offset = this.cumulativeOffset(element);

return (this.ycomp >= this.offset[1] &&

this.ycomp < this.offset[1] + element.offsetHeight &&

this.xcomp >= this.offset[0] &&

this.xcomp < this.offset[0] + element.offsetWidth);

overlap: function(mode, element) {

if (!mode) return 0;

if (mode == 'vertical')

return ((this.offset[1] + element.offsetHeight) - this.ycomp) /

element.offsetHeight;

if (mode == 'horizontal')

return ((this.offset[0] + element.offsetWidth) - this.xcomp) /

element.offsetWidth;

page: function(forElement) {

var valueT = 0, valueL = 0;

var element = forElement;

do {

valueT += element.offsetTop || 0;

valueL += element.offsetLeft || 0;

if (element.offsetParent==document.body)

if (Element.getStyle(element,'position')=='absolute') break;

} while (element = element.offsetParent);

element = forElement;

do {

if (!window.opera || element.tagName=='BODY') {

valueT -= element.scrollTop || 0;

valueL -= element.scrollLeft || 0;

}

} while (element = element.parentNode);

return [valueL, valueT];

clone: function(source, target) {

var options = Object.extend({

setLeft: true,

setTop: true,

setWidth: true,

setHeight: true,

offsetTop: 0,

offsetLeft: 0

}, arguments[2] || {})

source = $(source);

var p = Position.page(source);

target = $(target);

var delta = [0, 0];

var parent = null;

if (Element.getStyle(target,'position') == 'absolute') {

parent = Position.offsetParent(target);

delta = Position.page(parent);

}

if (parent == document.body) {

delta[0] -= document.body.offsetLeft;

delta[1] -= document.body.offsetTop;

}

if(options.setLeft) target.style.left = (p[0] - delta[0] + options.offsetLeft) + 'px';

if(options.setTop) target.style.top = (p[1] - delta[1] + options.offsetTop) + 'px';

if(options.setWidth) target.style.width = source.offsetWidth + 'px';

if(options.setHeight) target.style.height = source.offsetHeight + 'px';

absolutize: function(element) {

element = $(element);

if (element.style.position == 'absolute') return;

Position.prepare();

var offsets = Position.positionedOffset(element);

var top = offsets[1];

var left = offsets[0];

var width = element.clientWidth;

var height = element.clientHeight;

element._originalLeft = left - parseFloat(element.style.left || 0);

element._originalTop = top - parseFloat(element.style.top || 0);

element._originalWidth = element.style.width;

element._originalHeight = element.style.height;

element.style.position = 'absolute';

element.style.top = top + 'px';;

element.style.left = left + 'px';;

element.style.width = width + 'px';;

element.style.height = height + 'px';;

relativize: function(element) {

element = $(element);

if (element.style.position == 'relative') return;

Position.prepare();

element.style.position = 'relative';

var top = parseFloat(element.style.top || 0) - (element._originalTop || 0);

var left = parseFloat(element.style.left || 0) - (element._originalLeft || 0);

element.style.top = top + 'px';

element.style.left = left + 'px';

element.style.height = element._originalHeight;

element.style.width = element._originalWidth;

}

if (/Konqueror|Safari|KHTML/.test(navigator.userAgent)) {

Position.cumulativeOffset = function(element) {

var valueT = 0, valueL = 0;

do {

valueT += element.offsetTop || 0;

valueL += element.offsetLeft || 0;

if (element.offsetParent == document.body)

if (Element.getStyle(element, 'position') == 'absolute') break;

element = element.offsetParent;

} while (element);

return [valueL, valueT];

}

Element.addMethods();

第五个文件 dragdrop.css

@CHARSET "UTF-8";

body {margin:0; padding:0; text-align:center; font-family:"宋体",arial; background-color:#FFFFFF; font-size:12px; color:#333333;}

img,ul,li {margin:0; padding:0; border:none; list-style:none;}

a {font-family:"宋体",arial; font-size:12px; color:#333333; text-decoration:none;}

a:hover {color:#FC5A0A; text-decoration:underline;}

img,ul,li {margin:0; padding:0; border:none; list-style:none;}

.iformation { width:100%; height:25px; line-height:25px; text-align:left;}

.iformation .span1 {white-space:nowrap; padding-left:20px; font-size:12px; color:#333333; font-weight:bold; text-align:left;}

.iformation .span2 { color:#FC5A0A;}

.photocontent { width:920px; margin:auto;}

.photoleft { float: left;width:690px; height:760px; border: 1px #CCCCCC solid; border-right:none;}

.photoright { float: left;width: 200px;height:760px; margin-bottom:10px; border:1px #CCCCCC solid; border-left:2px #CCCCCC dashed;}

.albumList { width:100%; padding:10px 0; clear:both;}

.userAlbum { float:left; width:165px; height:220px; margin:2px; border:1px #CCCCCC solid;}

.albumFile { margin:0 auto; cursor:pointer;}

.photoEdit { float:right;}

.albumbox { margin:0 auto; width:128px;;height:128px;cursor:pointer;overflow:hidden;background:url('http://www.l99.com/skin1/images/folder.gif') no-repeat -128px;}

.nofile {margin: 150px auto;}

.nofile a {font-size: 14px;font-weight: bolder;margin: 0 5px;}

#photoCategory {width:200px;height:700px;overflow: hidden;white-space: nowrap;}

td { font-size:12px;}

#wrap {float: left;width: 15px;height: 700px;background: transparent url(http://www.l99.com/skin1/images/scrollbar-track-bottom.png) no-repeat bottom left;}

#track-top {position: absolute;width: 15px;height: 15px;background: transparent url(http://www.l99.com/skin1/images/scrollbar-track-top.png) no-repeat top left;}