JS各种各样的拖动效果

<html>
<head><title>拖动效果函数演示 by Longbill.cn</title>
<style>
body
{ font-size:12px; color:#333333; border : 0px solid blue;
}
div
{ position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px;
}
</style>
</head>
<body>
<script>
function drag(o,s)
{ if (typeof o == "string") o = document.getElementById(o); o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; o.orig_index = o.style.zIndex; o.onmousedown = function(a) { this.style.cursor = "move"; this.style.zIndex = 10000; var d=document; if(!a)a=window.event; var x = a.clientX+d.body.scrollLeft-o.offsetLeft; var y = a.clientY+d.body.scrollTop-o.offsetTop; //author: www.longbill.cn d.ondragstart = "return false;" d.onselectstart = "return false;" d.onselect = "document.selection.empty();" if(o.setCapture) o.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove = function(a) { if(!a)a=window.event; o.style.left = a.clientX+document.body.scrollLeft-x; o.style.top = a.clientY+document.body.scrollTop-y; o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; } d.onmouseup = function() { if(o.releaseCapture) o.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove = null; d.onmouseup = null; d.ondragstart = null; d.onselectstart = null; d.onselect = null; o.style.cursor = "normal"; o.style.zIndex = o.orig_index; } } if (s) { var orig_scroll = window.onscroll?window.onscroll:function (){}; window.onscroll = function () { orig_scroll(); o.style.left = o.orig_x + document.body.scrollLeft; o.style.top = o.orig_y + document.body.scrollTop; } }
}
</script> <div id="div1" style="left:10px;top:10px;">div1:我可以被拖动</div>
<div id="div2" style="left:120px;top:10px;background-color : #f3d9ff">div2:来拖我呀</div>
<div id="div3" style="left:230px;top:10px;background-color : #c3ffff">div3:我随便你拖</div>
<div id="div4" style="left:10px;top:120px;background-color : #c3d944">div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看</div>
<div id="div5" style="left:120px;top:120px;background-color : #f3d944">作者: Longbill
<a href=http://www.longbill.cn target=_blank>www.longbill.cn</a>
</div>
<div id="div6" style="left:230px;top:120px;background-color : #e3f944;width:200px;">参数说明:drag(obj [,scroll]);obj:对象的id或对象本身;scroll(可选):对象是否随窗口拖动而滑动，默认为否鼠标右键查看源代码
</div> <script>
drag("div1");
drag("div2");
drag("div3");
drag("div4",1);
drag("div5",1);
drag("div6",1); </script> </body></hrml>

其它相关：
转自：http://www.cnblogs.com/jyshi/

转载于:https://www.cnblogs.com/jyshi/archive/2011/08/12/2136071.html

JS各种各样的拖动效果相关推荐

js实现元素拖动效果
首先看一下演示效果,项目在线演示实现思路:将元素拖动分为三部分,鼠标按下,鼠标移动,鼠标弹起,分别监听三个事件.首先是定义四个变量startX,startY,sourceX,sourceY,分别代表 ...
JS实现容器模块左右拖动效果
JS实现容器模块左右拖动效果实际效果是鼠标点击上方颜色模块,左右拖动,根据拖动的距离来显示模块一共有7个颜色块代码如下 CSS #box {/*margin: 0 auto;*/width: ...
js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler
效果如下: 可以调整参数如下: CSDN下载地址: 上传到csdn 不见了等出现了再贴地址.. js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler-Javascript文档类资源-CSD ...
一行代码轻松实现拖动效果
写JS实现拖动需要一大堆不便维护的代码,实属麻烦,Google了大半天,发现了一个优秀的Jquery插件EasyDrag,只需要一行代码便可轻松在主流浏览器上实现拖动效果. $ ...
jquery div拖动效果示例代码
jquery div拖动效果示例代码 div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过复制代码代码如下: <%@ ...
vc++ mfc中拖动效果的实现借助于CImageList
拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...
Android UI控件之Gallery(拖动效果) --拖动式图片浏览
我们知道现在智能手机上都有这样一种功能,就是你在浏览图片的时候.不是硬性的点击按钮而是可以实现手指的拖动,划开效果.使用户具有更好的交互体验,不过这种效果是如何实现的呢? 在Android中是通过G ...
模拟一个盒子的拖动效果
博主的前端入门知识是在慕课网学的,当时有个demo,就是在网页模拟一个QQ面板的拖动效果(如图,用两个DIV代替...效果是拖动中间的DIV,整个DIV跟着移动),今天来总结记录一下. 思路是当鼠标按 ...
微信小程序例子——鼠标拖动效果
1.效果展示 2.关键代码 index.wxml文件 index.js文件 3.源代码获取方式百度云链接:http://pan.baidu.com/s/1jIsJYcQ 密码:i3tw 4.在编写鼠 ...

JS各种各样的拖动效果

JS各种各样的拖动效果相关推荐

最新文章

热门文章