利用JavaScript实现简单的拖动层(只使用于IE)

实际上就是用了三个事件函数 1.onmousedown 2.onmousemove 3.onmouseup 利用这三个事件函数就可以了,代码如下:  
 <script type="text/javascript">

        var x,y;

        function mousedown(obj)

        {

            obj.onmousemove = mousemove;

            obj.onmouseup = mouseup;

            

            oEvent = window.event ? window.event : event;

            x = oEvent.clientX;

            y = oEvent.clientY;

        }

        function mousemove()

        {

            oEvent = window.event ? window.event : event;

            var _top = oEvent.clientY - y + parseInt(this.style.top) + "px";

            var _left = oEvent.clientX - x + parseInt(this.style.left) +"px";

            this.style.top = _top;

            this.style.left = _left;

            x =  oEvent.clientX;

            y =  oEvent.clientY

        }

        function mouseup()

        {

            this.onmousemove = null;

            this.onmouseup = null;

        }

    </script>
html部分是 <div id="div1" style="width: 100px; height: 100px; top:10px; left:15px; cursor:move; background-color:Blue; position:absolute;" οnmοusedοwn="mousedown(this)" > </div> 注意事项: 1.要拖动的div一定要把position属性设置absolute;否则按流布局的话无法实现拖动。 2.一定要设置top和left的初始值,否则当onmousemove事件触发时就会报错! 存在问题: 1.只能在IE里用,没有实现跨浏览器。 2.在拖动过程中如果鼠标快速移动,就会移出到被拖动层的外面,这时如果松开鼠标,没有清空onmousemove事件,所以当鼠标指向时就会跟着鼠标移动。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值