简单的实现JQUERY拖动层

ExpandedBlockStart.gif代码
<script language="javascript" type="text/javascript">
        $(
function () {

            $.fn.extend({ moveDiv: 
function () {
                
var Coordinate = function () { };
                Coordinate.offsetX 
= 0;
                Coordinate.offsetY 
= 0;
                Coordinate.Obj 
= this;
                state 
= false;
                $(
this).mousedown(function (event) {
                    state 
= true;
                    Coordinate.offsetX 
= event.offsetX;
                    Coordinate.offsetY 
= event.offsetY;
                });
                $(
this).mouseup(function () {
                    state 
= false;
                });
                $(
"body").mousemove(function (event) {
                    
if (state) {
                        
var leftP = event.clientX - Coordinate.offsetX;
                        
var TopP = event.clientY - Coordinate.offsetY;
                        $(Coordinate.Obj).css({ 
"left": leftP, "top": TopP });
                        $(Coordinate.Obj).html(leftP);
                    }

                });
            }
            });
            $(
"#d").moveDiv();
        });
    
</script>

 

<body>
    
<form id="form1" runat="server">
    
<div id="d">
    
</div>
    
</form>
</body>

 

 

因为拖拽属于一个组合事件。。所以使用扩展,将这些组合事件定义为一个新的功能。

转载于:https://www.cnblogs.com/maydear/archive/2010/07/15/1777785.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值