WEB开发网      濠电娀娼ч崐濠氬疾椤愶附鍋熸い鏍ㄧ〒闂勫嫰鏌﹀Ο渚Ц闁诲氦顕ч湁婵犲﹤楠告禍鍓х磼鏉堛劌绗氶柟宄版嚇閹晠宕归銈嗘濠电偞鍨堕幐鎾磻閹捐秮褰掓偐閻戞﹩妫勯梺鎼炲妼鐎涒晝绮嬪澶樻晝闁挎繂鏌婇敃鍌涚厵閻庢稒锚閻忥絾绻濇繝鍐ㄧ伌闁诡垰鍟村畷鐔碱敂閸♀晙绱樺┑鐐差嚟婵儳螞閸曨剚鍙忛柍鍝勬噹缁€澶嬬箾閹存繄锛嶆鐐灲閹綊宕惰濡插鏌涢妸銉ヮ劉缂佸倸绉归弫鎾绘晸閿燂拷 ---闂備焦瀵уú鈺呭箯閿燂拷
开发学院网页设计JavaScript JavaScript 拖放效果 —— 小拖放也有大智慧 阅读

JavaScript 拖放效果 —— 小拖放也有大智慧

 2010-09-14 13:25:12 来源:WEB开发网 闂備線娼уΛ鎾箯閿燂拷闂備礁鎲¢崹鐢垫崲閹扮増鍎嶆い鎺戝€甸崑鎾斥槈濞嗗秳娌紓鍌氱▌閹凤拷濠电姭鎷冮崨顓濈捕闂侀潧娲ゅú銊╁焵椤掍胶鈯曢柕鍥╁仧缁辩偤鏁撻敓锟�闂備線娼уΛ鎾箯閿燂拷  闂備胶枪缁绘鈻嶉弴銏犳瀬闁绘劕鐏氱€氼剟姊洪崹顕呭剰闁逞屽墮缁夊綊寮婚妸褉鍋撻棃娑欏暈闁伙綀浜埀顒傛暬閸嬪﹪宕伴弽褏鏆﹂柨鐕傛嫹
核心提示:本文示例源代码或素材下载 拖放效果,也叫拖拽,JavaScript 拖放效果 —— 小拖放也有大智慧,学名Drag-and-drop ,是最常见的js特效之一,拖放对象的position必须是absolute绝对定位:this.Drag.style.position="absolute";最

本文示例源代码或素材下载

拖放效果,也叫拖拽,学名Drag-and-drop ,是最常见的js特效之一。

如果忽略很多细节,实现起来很简单,但往往细节才是难点所在。

这个程序的原型是在做图片切割效果的时候做出来的,那时参考了好几个同类的效果,跟muxrwc和BlueDestiny学习了不少东西。

虽然每次整理都觉得很好了,不过每隔一段时间又会发现得某个地方可以改善,某个地方有错误,某些需求需要实现,就像自己学习的知识那样。

这里考虑到有的人可能只需要简单的拖放,所以有一个简化版的拖放SimpleDrag,方便学习。

效果预览

JavaScript 拖放效果 —— 小拖放也有大智慧

拖放状态:未开始

程序说明

【程序原理】

这里以SimpleDrag为例说一下基本原理。

首先初始化程序中要一个拖放对象:

this.Drag=$(drag);

还要两个参数在开始时记录鼠标相对拖放对象的坐标:

this._x=this._y=0;

还有两个事件对象函数用于添加移除事件:

this._fM=BindAsEventListener(this,this.Move);
this._fS=Bind(this,this.Stop);

分别是拖动程序和停止拖动程序。

拖放对象的position必须是absolute绝对定位:

this.Drag.style.position="absolute";

最后把Start开始拖放程序绑定到拖放对象mousedown事件:

addEventHandler(this.Drag,"mousedown",BindAsEventListener(this,this.Start));

鼠标在拖放对象按住,就会触发Start程序,主要是用来准备拖动,在这里记录鼠标相对拖放对象的坐标:

1 2 3 4 5 6  下一页

Tags:JavaScript 效果 智慧

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接