一段代码，IE可以，firefox怎么不行？div 拖动

2009-03-03 01:58:37 169 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

H5拖拽7个事件 1.简介（1）蓝图拖动源放置目标拖放并不是单纯的把目标从一个地方移动另一个地方，其实是促成成功交互的操作过程中的反馈。光标指示当前的位置是否可防置目标用户提示是移动、链接或者复制鼠标经过的地方样式改变，提示此处可以放置。为满足以上的要求，浏览器在拖拽的每个过程中发起一系列的事件。数据传输：一组对象，这个对象用来公开存储，拖动数据存储是拖放操作的基础。可以将传输数据理解成拖放的中央... 阅读详情

        var x,y;

        function mousedown(obj)

        {

            obj.onmousemove = mousemove;

            obj.onmouseup = mouseup;

            

            oEvent = window.event ? window.event : arguments.callee.caller.arguments[0];

            x = oEvent.clientX;

            y = oEvent.clientY;

        }

        function mousemove()

        {

            oEvent = window.event ? window.event : arguments.callee.caller.arguments[0];

            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;

        }

...全文

CSS自定义滚动条：跨浏览器兼容的滚动体验优化指南滚动条是网页基础交互组件，其样式直接影响用户对产品专业度与一致性的感知。CSS自定义滚动条通过伪元素（如::-webkit-scrollbar）和标准属性（scrollbar-width、scrollbar-color）实现视觉控制，核心原理在于浏览器内核差异：WebKit系依赖伪元素分层定制，Firefox则采用语义化声明。该技术具备轻量、零JS、高可维护等工程价值，广泛应用于SaaS后台、数据看板与品牌官网等对设计系统要求严苛的场景。本文聚焦真实项目中滚动条尺寸控制、圆角交互、渐进增强兼容、移动端降级及阅读详情

jarodzhao

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

sherry521 2009-03-03

打赏
举报

关键在这个event，火狐是不支持全局的event，所以用的话要这么写：



var x,y;

        function mousedown(event,obj)

        {

            obj.onmousemove = mousemove;

            obj.onmouseup = mouseup;

            

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

            x = oEvent.clientX;

            y = oEvent.clientY;

        }

        function mousemove(event)

        {

            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;

        }

然后在触发函数的地方传入event，如：<input type="button" onClick="move(event)">

hzrui 2009-03-03

打赏
举报

oEvent = window.event ? window.event : event;
这是有问题的
oEvent = window.event ? window.event : arguments[0];
或是
oEvent = window.event || arguments[0];

或是
function mousemove(e)
{
oEvent = e|| window.event;
}

一把编程的菜刀 2009-03-03

打赏
举报

告诉你思路修改吧
oEvent = window.event ? window.event : this.obj;
红色部分，FF下读不到了

jarodzhao 2009-03-03

打赏
举报

不行啊，IE 没什么问题，ff 还是纹丝不动~

一把编程的菜刀 2009-03-03

打赏
举报

function mousedown(obj)

        {

            this.obj=obj;

            obj.onmousemove = mousemove;

            obj.onmouseup = mouseup;

            

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

            x = oEvent.clientX;

            y = oEvent.clientY;

        }

        function mousemove()

        {

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

            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;

        }

试试吧

jarodzhao 2009-03-03

打赏
举报

抱歉，发贴主题的代码自己调试过了
原来的代码是下面这段

        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;

        }

一段代码，IE可以，firefox怎么不行？div 拖动

相关推荐