JavaScript CSS修改学习第六章：拖拽

001　dragDrop　=　{
002　　　　　keyHTML:　'<a　href="#"　class="keyLink">#</a>',
003　　　　　keySpeed:　10,　//　pixels　per　keypress　event
004　　　　　initialMouseX:　undefined,
005　　　　　initialMouseY:　undefined,
006　　　　　startX:　undefined,
007　　　　　startY:　undefined,
008　　　　　dXKeys:　undefined,
009　　　　　dYKeys:　undefined,
010　　　　　draggedObject:　undefined,
011　　　　　initElement:　function　(element)　{
012　　　　　　　　　if　(typeof　element　==　'string')
013　　　　　　　　　　　　　element　=　document.getElementById(element);
014　　　　　　　　　element.onmousedown　=　dragDrop.startDragMouse;
015　　　　　　　　　element.innerHTML　+=　dragDrop.keyHTML;
016　　　　　　　　　var　links　=　element.getElementsByTagName('a');
017　　　　　　　　　var　lastLink　=　links[links.length-1];
018　　　　　　　　　lastLink.relatedElement　=　element;
019　　　　　　　　　lastLink.onclick　=　dragDrop.startDragKeys;
020　　　　　},
021　　　　　startDragMouse:　function　(e)　{
022　　　　　　　　　dragDrop.startDrag(this);
023　　　　　　　　　var　evt　=　e　||　window.event;
024　　　　　　　　　dragDrop.initialMouseX　=　evt.clientX;
025　　　　　　　　　dragDrop.initialMouseY　=　evt.clientY;
026　　　　　　　　　addEventSimple(document,'mousemove',dragDrop.dragMouse);
027　　　　　　　　　addEventSimple(document,'mouseup',dragDrop.releaseElement);
028　　　　　　　　　return　false;
029　　　　　},
030　　　　　startDragKeys:　function　()　{
031　　　　　　　　　dragDrop.startDrag(this.relatedElement);
032　　　　　　　　　dragDrop.dXKeys　=　dragDrop.dYKeys　=　0;
033　　　　　　　　　addEventSimple(document,'keydown',dragDrop.dragKeys);
034　　　　　　　　　addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
035　　　　　　　　　this.blur();
036　　　　　　　　　return　false;
037　　　　　},
038　　　　　startDrag:　function　(obj)　{
039　　　　　　　　　if　(dragDrop.draggedObject)
040　　　　　　　　　　　　　dragDrop.releaseElement();
041　　　　　　　　　dragDrop.startX　=　obj.offsetLeft;
042　　　　　　　　　dragDrop.startY　=　obj.offsetTop;
043　　　　　　　　　dragDrop.draggedObject　=　obj;
044　　　　　　　　　obj.className　+=　'　dragged';
045　　　　　},
046　　　　　dragMouse:　function　(e)　{
047　　　　　　　　　var　evt　=　e　||　window.event;
048　　　　　　　　　var　dX　=　evt.clientX　-　dragDrop.initialMouseX;
049　　　　　　　　　var　dY　=　evt.clientY　-　dragDrop.initialMouseY;
050　　　　　　　　　dragDrop.setPosition(dX,dY);
051　　　　　　　　　return　false;
052　　　　　},
053　　　　　dragKeys:　function(e)　{
054　　　　　　　　　var　evt　=　e　||　window.event;
055　　　　　　　　　var　key　=　evt.keyCode;
056　　　　　　　　　switch　(key)　{
057　　　　　　　　　　　　　case　37:　　　　//　left
058　　　　　　　　　　　　　case　63234:
059　　　　　　　　　　　　　　　　　dragDrop.dXKeys　-=　dragDrop.keySpeed;
060　　　　　　　　　　　　　　　　　break;
061　　　　　　　　　　　　　case　38:　　　　//　up
062　　　　　　　　　　　　　case　63232:
063　　　　　　　　　　　　　　　　　dragDrop.dYKeys　-=　dragDrop.keySpeed;
064　　　　　　　　　　　　　　　　　break;
065　　　　　　　　　　　　　case　39:　　　　//　right
066　　　　　　　　　　　　　case　63235:
067　　　　　　　　　　　　　　　　　dragDrop.dXKeys　+=　dragDrop.keySpeed;
068　　　　　　　　　　　　　　　　　break;
069　　　　　　　　　　　　　case　40:　　　　//　down
070　　　　　　　　　　　　　case　63233:
071　　　　　　　　　　　　　　　　　dragDrop.dYKeys　+=　dragDrop.keySpeed;
072　　　　　　　　　　　　　　　　　break;
073　　　　　　　　　　　　　case　13:　　　　//　enter
074　　　　　　　　　　　　　case　27:　　　　//　escape
075　　　　　　　　　　　　　　　　　dragDrop.releaseElement();
076　　　　　　　　　　　　　　　　　return　false;
077　　　　　　　　　　　　　default:
078　　　　　　　　　　　　　　　　　return　true;
079　　　　　　　　　}
080　　　　　　　　　dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);
081　　　　　　　　　if　(evt.preventDefault)
082　　　　　　　　　　　　　evt.preventDefault();
083　　　　　　　　　return　false;
084　　　　　},
085　　　　　setPosition:　function　(dx,dy)　{
086　　　　　　　　　dragDrop.draggedObject.style.left　=　dragDrop.startX　+　dx　+　'px';
087　　　　　　　　　dragDrop.draggedObject.style.top　=　dragDrop.startY　+　dy　+　'px';
088　　　　　},
089　　　　　switchKeyEvents:　function　()　{
090　　　　　　　　　//　for　Opera　and　Safari　1.3
091　　　　　　　　　removeEventSimple(document,'keydown',dragDrop.dragKeys);
092　　　　　　　　　removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
093　　　　　　　　　addEventSimple(document,'keypress',dragDrop.dragKeys);
094　　　　　},
095　　　　　releaseElement:　function()　{
096　　　　　　　　　removeEventSimple(document,'mousemove',dragDrop.dragMouse);
097　　　　　　　　　removeEventSimple(document,'mouseup',dragDrop.releaseElement);
098　　　　　　　　　removeEventSimple(document,'keypress',dragDrop.dragKeys);
099　　　　　　　　　removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
100　　　　　　　　　removeEventSimple(document,'keydown',dragDrop.dragKeys);
101　　　　　　　　　dragDrop.draggedObject.className　=　dragDrop.draggedObject.className.replace(/dragged/,'');
102　　　　　　　　　dragDrop.draggedObject　=　null;
103　　　　　}
104　}

编缉推荐阅读以下文章

• JavaScript CSS修改学习第五章：给“上传”添加样式
• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第三章：修改样式表
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表