目前jquery ui的draggable有26kb,稍微有点大,想问一下高手该怎样来写一个能兼容所有浏览器的js实现draggable?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
可移动的元素一定是定位元素(非static定位的) 监听鼠标mousedown,mouseup 和 mousemove事件。 mousemove事件处理里获取 event 事件对象的 clientX 和 clientY属性, 通过style设置元素的 top 和 left
mousedown
mouseup
mousemove
event
clientX
clientY
style
top
left
举例代码如下:
var IsMousedown, LEFT, TOP, obj; document.getElementById("Mdown").onmousedown=function(e) { obj = document.getElementById("box"); IsMousedown = true; e = e||event; LEFT = e.clientX - parseInt(login.style.left); TOP = e.clientY - parseInt(login.style.top); document.onmousemove = function(e) { e = e||event; if (IsMousedown) { login.style.left = e.clientX - LEFT + "px"; login.style.top = e.clientY - TOP + "px"; } } document.onmouseup=function(){ IsMousedown=false; } }
没什么特效,简单的draggable就是这么实现的,不贴demo了,题主自己写写看吧
不怪有人-1。这问题无异于“请帮我从头到尾写一个XX功能的程序,还要最简化掉”。
别费神自己写,查GitHub啊。比如说可以这样随便找一个。
值得注意的是,也许有必要看一下现有的工作是否基于jQuery UI。如果已经有了这个环境,那也就别怕个别模块再大一些了,用原生的模块总不是坏事。或者看一下是否已经用了jQuery,如果用了就找jQuery的插件来做这个。
还有个提示是“先实现再优化”。老生常谈了,不忘就行。
http://wujinzhilu.com/demo/learn/6/drag.html
比如这样
回题主,简单的draggable实现没有多复杂的,需要如下几个条件
举例代码如下:
没什么特效,简单的draggable就是这么实现的,不贴demo了,题主自己写写看吧
不怪有人-1。这问题无异于“请帮我从头到尾写一个XX功能的程序,还要最简化掉”。
别费神自己写,查GitHub啊。比如说可以这样随便找一个。
值得注意的是,也许有必要看一下现有的工作是否基于jQuery UI。如果已经有了这个环境,那也就别怕个别模块再大一些了,用原生的模块总不是坏事。或者看一下是否已经用了jQuery,如果用了就找jQuery的插件来做这个。
还有个提示是“先实现再优化”。老生常谈了,不忘就行。
http://wujinzhilu.com/demo/learn/6/drag.html
比如这样