最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS实现的简单拖拽功能示例
时间:2017-06-21 编辑:简简单单 来源:一聚教程网
1、实例代码:
代码如下 | 复制代码 |
#water{ width:400px; height:188px; background-color:#ff6600; } #water:hover{ cursor: pointer; }
dragInit("water");//调用 //拖拽初始化 functiondragInit(id){ var$div = document.getElementById(id); varstyle = { position:"absolute", left:"0", top:"0" } for(varkinstyle){ $div.style[k] = style[k];//设置关键css } $div.onmousedown =function(e){//鼠标按键按下 e = e || window.event; varx = e.clientX - $div.offsetLeft;//鼠标到左上角的距离信息, 固定不变 vary = e.clientY - $div.offsetTop; document.onmousemove =function(e){//鼠标移动 e = e || window.event; varL = e.clientX - x; varT = e.clientY - y; varpW = document.documentElement.clientWidth;//页面宽度 varpH = document.documentElement.clientHeight; vardivW = $div.offsetWidth;//Dom宽度 vardivH = $div.offsetHeight; // 范围限定 if(L < 0){ L = 0; } if(T < 0){ T = 0; } if(L > pW - divW){ L = pW - divW; } if(T > pH - divH){ T = pH - divH; } // 范围限定 end $div.style.left = L +"px"; $div.style.top = T +"px"; }; document.onmouseup =function(e){//鼠标按键松开 document.onmousemove =null; }; }; }
|
2、运行效果图如下:
相关文章
- 简单实现js鼠标跟随效果 07-29
- 简单实现js拖拽效果 07-29
- 超简单的Vue.js环境搭建教程 07-05
- JS实现简单拖拽效果 06-23
- 搭建简单的nodejs http服务器详解 06-13
- js实现简单的二级联动效果 06-12