首页 | 新闻资讯 | 日志 | 甬派论坛 | 搜索

Yooge.Net - 甬派设计

投递文章 投稿指南 甬派设计公告: 新风格大家是否习惯？模板是否兼容？欢迎大家测试。问题反馈： QQ:285559800   邮箱：yooge.n...
搜索: 您的位置：甬派设计 >> 站长入门 >> 查看资讯

拖动效果 封装

2008-5-07 06:19   来源: 本站原创   作者:webmaster   【大 中 小】 评论：0 条

核心提示：拖动效果 封装 适应火狐程序代码 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd><html xmlns=http://www.w3.org.
 拖动效果 封装 适应火狐甬派设计FFq4n(DY}
甬派设计V F_0H Y
甬派设计%Hh d RXY h
程序代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
)W;J;t6r"Qh<html xmlns="http://www.w3.org/1999/xhtml">
&}.J5@sIL6W<head>甬派设计9bJ5`W^ y/@0@
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />甬派设计g?r&C+A-e
<title>鼠标拖动层JS</title>甬派设计rxpNkg?b/t
<style type="text/css">甬派设计[ \l-M0Q
<!--甬派设计was7[R1jF!bN
body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}甬派设计;nE do J8i1k:`f
.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}    
}6@0S&M#_.t_rt{text-align:right;}
og Qz0Rh1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}甬派设计#qR%p/Odp:_
ul,li{margin:0px;padding:0px;}甬派设计8Z Je8D{;S |(P*S
li{list-style-type:none;}甬派设计 h,`*v.u4s/}
h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}
f:C w#U t*g'^ o.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}
6k8My+i ]cQ.cont{padding:10px;}甬派设计"e4c_,F%`1j
.cls{clear:both;}
1D3O K \fv.].hidden{display:none;}甬派设计5D;^-Gq,a'?.l8y4w
#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}
L)t8IIGu.textDiv{margin:10px 40px 10px;text-align:center;}
DH d h#Vt {Bh2{margin:0px 10px;background:#ccc;padding:5px;}
s'w I KaO2t.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}
+m0hr.t oe)g.authorInfo{width:760px; margin:10px auto 10px;text-align:center;}甬派设计dJ w8vC)p:SW
.c_666{color:#666;}甬派设计&H$uE!}/@:c
.red{color:red;}
!^t3dd(Q1W.scrolldoorFrame{width:600px;border:1px solid #FFF;margin:0px auto;overflow:hidden;position:relative;height:400px;}甬派设计Y({/p ei
.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}
9AbswhZc3uv.scrollUl li{float:left;}
'\z oI9k;D.bor03{border:1px solid #ccc;border-top-width:0px;}
2`J QJ,y.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}甬派设计:Uc2V Ie[h3lm
.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}
9Vs}u8mv-->甬派设计"z,_7O!v })p
</style>
U%C5@Ki{<script type="text/javascript">甬派设计 I1VC`A5sQ
/*甬派设计 w$kV,qRR;lZ i X
甬派设计
'JDEQ"g0`Iqq:285559800
8xTw_J_/E*/甬派设计F%mY$\*wb?
function dragClass(){
ts:I} U@l6h9G    this.mouseState = document.all ? 1 : 0 ;甬派设计 IL'Y([0g%{oE
    this.x;
7DP.U+g1Q;}^8I4m    this.y;
9D(ZcR3c]lb    this.dragId = null;甬派设计$p{"f2JEr7uZTB-G
    this.index = 100;甬派设计o ?i4HH6s
    document.onselectstart = function(){return false;};甬派设计4M!ou@-N@4CSx$S
}甬派设计| ku{9e~s
dragClass.prototype = {甬派设计I.G7m `4m
    dragStar:function(dragId,moveId){//拖动入口函数甬派设计dhY-kdb
        var _this = this;    甬派设计^e0e} gLw
        _this.$(dragId).style.cursor = "move";    甬派设计V@c3wm
        _this.$(dragId).onmousedown = function(e){
9T-?/@\*?7b            var e = e ? e : event;甬派设计Pt)C4O'?:|@d6Ea
            //_this.$(moveId).style.zIndex = _this.index++;
Tt8`.eL            if(e.button == _this.mouseState)
#Volw+X$b/__T            {甬派设计6u%t&n%`6T p`;u[
                _this.setDragInfo(e,moveId,moveId);甬派设计IEyX|`'U
                _this.dragPro(moveId);甬派设计4{1sT$h uKWMn_9}?*X
            }            甬派设计9\ Oba!c
        },甬派设计%_:I0?s!jm3O}\
        _this.$(moveId).onmousedown = function(e){甬派设计 Dn-`ha9}b
            _this.$(moveId).style.zIndex = _this.index++;
sKF| S!O        },        甬派设计8l:BO#l7h2x;^"r7L1d$d
        _this.$(dragId).onmouseup = function(){
Xn O@/ze}Y            _this.clearDragId();甬派设计z)V-gG5U"f2m+FB-~{
        }甬派设计*l8xA)R9V
        document.onmouseup = function(){
3e/ze |8Ks0tvP;o            _this.clearDragId();甬派设计C}O)k baKZ8Vb
        }甬派设计2hg&WD.}!Pn*f C
    },
V%{,Bb'gX4E2Z    setDragInfo:function(e,dragId,moveId){//拖动初始化
\_/HX\q0z%F        this.x = e.clientX;
+O@o Jc NJ        this.y = e.clientY;
1zi%o!X@j&{j6ZW        this.dragId = dragId;甬派设计,ofu+hjOw
        if(this.$(moveId).style.position != "absolute")
Wb7g!C P}        {甬派设计s9bM;MFtK2?
            this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";    甬派设计FS HP"l0MF
            this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";甬派设计 |5Ck4Qb&eL N |N~K
            this.$(moveId).style.position = "absolute";
e)J1H2G!u9RW O            this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";
b3j-sijn:Z            this.$(moveId).style.top = this.$(moveId).offsetTop + "px";甬派设计_j#b `u
        }                
{ST B1[nAl    },甬派设计.VXE{bF
    clearDragId:function(){ //清除拖动ID
h/`,K~L3cix:^        this.dragId = null;
Y,kq"x)s%iq~    },
+?YI/WHR&G    dragPro:function(moveId){
G*B3[qU,Q        var _this = this;
#lOQ3zb`        document.onmousemove = function(e){
?7U2^AOcN!_            var e = e ? e : event;
y?Fvx2X2B            if(e.button == _this.mouseState && _this.dragId != null)
'wc9[F7s0|CXg            {
Yc%fO/e{/g                var x = e.clientX;甬派设计}._u7w?n%_
                var y = e.clientY;
FN| bLX[                //_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";甬派设计)Qy9^.?E(JRM
                //_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
)L'?T3F*v(iQQu~0y                _this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";甬派设计wcV)a)`1^WB!|U3S
                _this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";甬派设计YRC$E(B,ti@ag`6l
                _this.x = x;甬派设计 d]q&^#s]Rr
                _this.y = y;
$?/q}[.P'X%MI                //alert(_this.$(dragId).style.left);甬派设计"Gtr5~ W+TO:UAk
            }
cxtz NDw            
,O2s%kY\$W        }甬派设计 i8\#U.z~ P3OtU
    },
{ lXy(X8N    $:function(o){//获取对象
4av.h-d9e'@pJ        if(typeof(o) == "string")甬派设计I Z:S;Sxdh By VO
        {
y6Gj |&v k            if(document.getElementById(o))甬派设计LY5c!a6Ap
            {甬派设计$eT8tr \4Qls%?P
                return document.getElementById(o);
4c/^ cgh7[[%m            }甬派设计v[N(]| q!c*~
            else
'AA(B p7b7YIt            {
~8EI'J&{ v                alert("errId \""+ o + "\"!");甬派设计4{ YYqP;L3L:|@~
                return false;甬派设计g(ryo1|&X.v
            }甬派设计,uR-I9a q6e2Us
        }甬派设计+Y-k)u9u@ ?P
        else
,RT$j@3K n        {
P{4Z'W4df!F\_            return o;甬派设计;Z.Z\&A$q0GH)p9u:d
        }甬派设计8GR+p%Yk!G
    }甬派设计+bx \$K2tXC7Y$d
}甬派设计gNH.Sw[ ]
window.onload = function(){
y`yOu`ri}oiyI    var c = new dragClass();
fQ7L+G;K7]Fk    c.dragStar("b","a");甬派设计(ni#[{5OqW
    c.dragStar("d","c");甬派设计0_g5@ W~
}甬派设计D&s pTMdlfn+d
</script>甬派设计%P ~(N7mcT3XK
</head>甬派设计Uf`pJ([x']s-Z
<body>
']SQ Vb-H6?Q<div class="bodyer">
~X9l#b,[    <h1 class="t_rt">甬派设计2hG'S!DYJ|D
        鼠标拖动层封装类
/F'^bq%W(Q N _'L    </h1>
1QPzlM2Vo]&KT    甬派设计&IK)`zQ}G-ll
    <h2>
x7RqDGt F        效果预览甬派设计P9k!YuM
    </h2>
+uxZ V+mn    
S DtO\4x    <div class="preview">甬派设计$@.y [R.fq u.lm
        <div class="scrolldoorFrame">
G$C_:b8UI1YA            <div id="a" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">
N9[H7q:W L3D                <div id="b" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">甬派设计$s B&B3l#yS FA baP
                拖动层1
)[\q6W]b                </div>
"??:B"A2M4X{7M|                    移动层
}+i#x BoN            </div>
@@!H/` a8Jy,x            甬派设计6Q|/Ee-n!p TpX
            <div id="c" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">甬派设计 a"TgpAI,[
                <div id="d" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">甬派设计K]J \8? r]
                拖动层2甬派设计le"P z@]
                </div>甬派设计2zCe*QzQ[3b^ n
                    移动层甬派设计2qcK,KLn0x3Fs
            </div>甬派设计O;@4s6y A e
        </div>甬派设计3v^ }%[R)M"m+A
    </div>
:p@3Y-Y g p$J,T!O    甬派设计-x1j!Sr4j M2@
    <h2>甬派设计?}k(_:C(b.X
        源代码甬派设计#ph_^By
    </h2>
f4qI)]g7@U"o b    
K M3g(` j.b    <div class="textDiv">甬派设计3N"V(L'K@
        <textarea id="sourse">甬派设计'z!J&`mw7e;e
function dragClass(){甬派设计~ |9F8EhN1X;\c(hD
    this.mouseState = document.all ? 1 : 0 ;甬派设计6kDBZ1^4c`
    this.x;甬派设计,o `j j `
    this.y;
5l/LB3ZgLm wl?y7Op-~    this.dragId = null;甬派设计o}*{!Q,sB3`+e5t9@;Rh7y
    this.index = 100;甬派设计YAo7k.f Z)~3r]
    document.onselectstart = function(){return false;};甬派设计H8~B @]3I&Rh
}
Zac[;?dragClass.prototype = {甬派设计I.lZq@egL
    dragStar:function(dragId,moveId){//拖动入口函数
Po {r6vaF|        var _this = this;    甬派设计} J&F;y(p9m
        _this.$(dragId).style.cursor = "move";    
Z1A T3H/P'{ b        _this.$(dragId).onmousedown = function(e){甬派设计-Nmu FFpa r
            var e = e ? e : event;甬派设计?^#Co D V7A6Q
            //_this.$(moveId).style.zIndex = _this.index++;
6dQ U\7b%@Ew            if(e.button == _this.mouseState)
@W^T/[8^b1W3h|            {
\b||%b)K                _this.setDragInfo(e,moveId,moveId);甬派设计b,wdmV:P#Sf
                _this.dragPro(moveId);
&gC mJ k Kk            }            
._ug`WXU)U        },
Eb.r MM M,X+O}4` I;k        _this.$(moveId).onmousedown = function(e){甬派设计mg~'icOP"V
            _this.$(moveId).style.zIndex = _this.index++;甬派设计r2}c JF\ C qT;y
        },        
D2{1A$G.qEm d7UA!TA0k        _this.$(dragId).onmouseup = function(){甬派设计"js;Apr@/E
            _this.clearDragId();
iJ+ZHxc f8OK        }
(P CT0W&sZ%p+^yi        document.onmouseup = function(){
{|$m e;f.cE            _this.clearDragId();
7k ?r}.~GQ\        }
8_!N F(p%Tf&f|    },
[+eO U3AB*i9R    setDragInfo:function(e,dragId,moveId){//拖动初始化甬派设计{2lx6hM a bsCO:@:~
        this.x = e.clientX;甬派设计 P^e0R6]F"S4n8y
        this.y = e.clientY;甬派设计2H:Tn&E%]
        this.dragId = dragId;甬派设计7dmw5T:m6r%W0ZxwL7E
        if(this.$(moveId).style.position != "absolute")甬派设计d O oTOY [.SN
        {
D){+CUs5LOu            this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";    
{-H+Mk:l%aNY_            this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";
o4V;E Ly)Z%o`%A            this.$(moveId).style.position = "absolute";甬派设计U9? o-XH
            this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";甬派设计V#@5[qAG(Hai7xV
            this.$(moveId).style.top = this.$(moveId).offsetTop + "px";甬派设计i ]Q9oC3taUx
        }                
&RF:d8i(y$W t I)p;r    },
j8ukgW    clearDragId:function(){ //清除拖动ID甬派设计~f#|6\,y~2kd
        this.dragId = null;
E A~g WA    },
-M.J:nlW    dragPro:function(moveId){
.v:e]q&W-p:ZqR.d-V"Y6_        var _this = this;
dy r*cEF        document.onmousemove = function(e){甬派设计R+o9v'ZAh#b1Ec B
            var e = e ? e : event;甬派设计gRw2[8r^
            if(e.button == _this.mouseState && _this.dragId != null)
#u~,z@:q:Yy            {甬派设计~\8a5Ss5_5HU5g1?)P
                var x = e.clientX;甬派设计 klq(jSs:K#i!]
                var y = e.clientY;
HWW/BP$T+l                //_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";
DJdNF3B                //_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
*p3b4@ DTu                _this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";
Nd G*Y4b ba;O                _this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";甬派设计8^IK r+SL |
                _this.x = x;甬派设计0T\B(W%N
                _this.y = y;
hJ\:k]8o`]                //alert(_this.$(dragId).style.left);
8Nm@[ Z            }
$n7km`"A$e!L0GRJ            甬派设计`E%] O2Ki,}h1VK
        }
&kYq$`OP    },
#uQM6iJXN+d    $:function(o){//获取对象甬派设计1N(Ry*L3Sy h(X
        if(typeof(o) == "string")
7mcBR{ eu(y        {甬派设计FmPeO `4zI:Lg
            if(document.getElementById(o))
OK'f M,I1}            {
-t@ NsO k]                return document.getElementById(o);甬派设计H,Q5z"sGD
            }甬派设计1A`,C:c&U9^ i4c1D
            else甬派设计1v3nmu^Qca5HBe
            {
s7v0i"B&\vP g                alert("errId \""+ o + "\"!");甬派设计Uvh;V&|&mi o:sYH
                return false;甬派设计 ?xD L8q%w
            }
E%Kwm/f7k        }
5g l:JBp0UK        else
'tQD%[oD@6}        {甬派设计Z)RWc-Z
            return o;甬派设计ObJ gu!`
        }甬派设计 zG.bW.gy;D
    }
U [ j,UK}
K!o,lj/z~ u^$M M        </textarea>甬派设计 Y{6RLY*fP l-E
    </div>
]0u6c#p*L2e    甬派设计"ty"H#i(JR,e,L2L
    <h2>
'Ur%E"@)T!vH8gZ        使用方法
*S P5CN.lq    </h2>甬派设计6ojzVGY zfS
    
awk;seh-KH  <div class="preview">
+uT&FT#^.d`-w        1.把以上代码引进你的页面 <script type="text/javascript" src="dragClass.js"></script><br/>甬派设计E3V9`/yn$T S/[ g
        2.在页面的"</body>"标签前加入以下代码:<br/>甬派设计0dNV0|)^P MOqR5Q
        <div class="example">            
R _ Y-wW)| x            <script type="text/javascript"><br/>甬派设计7nF L OL#Qx
            window.onload = function(){<br />甬派设计6vz_#~S7O:J FW
    var c = new dragClass();//创建对象<br />甬派设计]`;b_U^*b(]3q L
    c.dragStar("拖动id","移动层id");<br />
Q4b*xI%^+kDN"G,b}<br/>甬派设计4R&C$Z&\Rri
            </script>
Y+ID2?/Oy        </div>    甬派设计/A1[h8DL ^;g_u
        其中sd方法中的参数为:<br/>甬派设计@+B7W*BsI
            参数一 "拖动id":鼠标经过时候鼠标样式变成移动样式模样的元素的id<br/>甬派设计SLs)F(dq9?
            参数二 "移动层id":即将移动的元素的id<br/>    
-d%\%O(^D2Y ^vz9@5go        <span class="red">3.建议移动层是绝对定位(position:absolute;).</span>        甬派设计3dI:^a7C(F tb
  </div>
*t5O*yd*U    
?$g cRn'pEnx2F</div>甬派设计mT/e?&Y
<div class="authorInfo">甬派设计"}z-zm?,A'v
    <div class="cont">甬派设计[1Zx*j3@2By
        甬派设计 ThirdteenDevil <br/>甬派设计Y6r"wu;w`
        [qq:285559800] 甬派设计 M ` gF l*TDN&g#`
    </div>
u:N2EZ1WE wF</div>甬派设计#DN1Ji.O A!j)L
</body>
WGlC$@0[Hz*Mr</html>

468*60 AD

  您看到此篇文章时的感受是：
0
 0
 0
 0
 0
 0
 0
 0
欠扁 支持 很棒 找骂 搞笑 软文 不解 吃惊
12
顶一下 3
踩一下

Tags： 效果   拖动   封装  
责任编辑：甬派设计
  • 查看: 46次
  • 上一篇：
  • 下一篇：
    • 最新图文
    相关文章列表
    请文明参与讨论，禁止漫骂攻击。  验证码： seccode
    最新更新
    月度热点
    最新评论
    论坛新帖
    论坛热贴
    甬派设计 - 交流论坛 - 快捷面板 - 站点地图 - 友情链接 - 空间列表 - 站点存档 - 联系我们

    © CopyRight 2008 - www.yooge.net Inc. All Rights Reserved 站长QQ:285559800