来源:
在闲暇之余实现了一个简单的JS拖动效果。下面是效果图:
实现原理:
编写鼠标按下(mousedown)、鼠标移动(mousemove)、鼠标释放(mouseup)的事件函数。为将被移动的元素(一般是div)注册mousedown事件,当被移动元素中的mousedown事件触发时为body注册mousemove和mouseup事件。当mouseup事件触发时,移除body的mousemove和mouseup事件。
代码如下:
以下是JS代码:
<script type="text/javascript"> window.onload = function(){ result = $("result"); $("center").onmousedown = moveFun; }; /* 处理透明窗口移动 */ function moveFun(event) { var body = document.documentElement, evt = event || window.event, src = evt.target || evt.srcElement; var _sX = 0, _sY = 0; if (evt.type === "mousedown" ) { body.onmousemove = moveFun; body.onmouseup = moveFun; window._offset_ = getElementOffset($("item")); _offset_ = { left : (evt.clientX - _offset_.left), top : (evt.clientY - _offset_.top) }; } if (evt.type === "mousemove") { var target = $("item"), _x = evt.clientX, _y = evt.clientY; target.style.left = (_x - _offset_.left) + "px"; target.style.top = (_y - _offset_.top) + "px"; } if (evt.type === "mouseup" ) { body.onmousemove = null; body.onmouseup = null; } } /* 获取obj对象当前相当于窗口最左边和最上边的距离 */ function getElementOffset(obj){ var _left = obj.offsetLeft, _top = obj.offsetTop, parent = obj.offsetParent; while (parent != null) { _left += parent.offsetLeft; _top += parent.offsetTop; parent = parent.offsetParent; } return { left : _left, top : _top }; } /* 返回指定id对象 */ function $(id) { return document.getElementById(id); } </script>
HTML代码:
<div class="item" id="item"> <div class="center" id="center"> <div class="content"> 人民日报发微博称,很多奶茶店热饮的杯盖上,都有一个三角符号,中间写着数字6。专家表示,最常用的6号塑料材料是聚苯乙烯,遇热可能会“放毒”,喝热饮最好不要带盖喝。这是怎么回事?6号塑料真的有毒吗?来看看本文怎么说吧。 </div> </div> <div class="bottom"> <a href="#" class="last">收藏</a> <img src="separator_updown.png"> <a href="#">定时</a> <img src="separator_updown.png"> <a href="#">发送</a> </div> </div>
相关推荐
原声JS实现拖拽效果,带有详细思路、注释。原声JS实现拖拽效果,带有详细思路、注释。
最新Js实现拖动效果代码
js代码 实现Dom对象拖拽效果
Js实现拖拽效果源码下载
js实现进度拖拽效果
主要为大家详细介绍了JS实现拖拽效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
javascript实现用鼠标拖动页面的效果,而不是传统意义上的拖动一个层的效果
js百度地图放大缩小拖拽查看效果 js百度地图放大缩小拖拽查看效果
javascript实现关机效果,且能拖拽
效果描述: 支持拖拽的原生JS实现的效果,简洁易用
js制作的图片拖动效果,比较简单,可以实现在div容器中,随意拖动指定单张图片的效果,效果比较简单,可以放心下载
three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例three.js拖拽生成场景简单示例
简单易懂,使用方便(idList是返回拖拽到位置图片的集合)
js实现首页拖拽布局效果 首页分为三列用户可以将DIV在三列间任意拖拽
纯js实现html页面元素的拖拉功能,只需要给要拖动的html元素,加上指定的函数,就可实现元素的拖动。
javascript实现鼠标拖动div的效果。。。
JavaScript实现简单拖拽效果 本文实例为大家分享了JavaScript实现简单拖拽效果的具体代码,供大家参考,具体内容如下 先看实现的效果: 思路:里面用到了三个事件,鼠标按下、移动、松开事件 那么首先创建盒子...
要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || window.event; 根据需求需要用到的拖拽效果的坐标 clientX:鼠标点击位置相对于浏览器可视区域的水平...
本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 想要让整个元素移动需要三个事件: 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html <!-- 点击title拖拽 --...