javascript实现dom元素可拖动

2024-05-06 15:00:08

字体：大中小

来源：转载

供稿：网友

摘要：

　　最近在项目中要做一个图片预览的功能，这时候会遇到用户上传很大的图片，已经超出视图界面。最终决定做一个在固定宽和高的位置，用户可以拖动图片查看。所以自己就写了一个支持ie5+，chrome，Firefox，opera等浏览器的可拖动dom元素的插件。

实现这个功能所需要的知识点不多，如下：

1、js中element.style.left

style.left返回的变量是个字符串，是个可改变量

js中element.offsetLeft

offsetLeft返回的是个int类型，不可改变量（意思就是说，改这个变量是不会影响布局的)

2、js 中event.clientX

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。

3、js中element.className

改变样式的类的方法

以上三点都是些比较熟的知识了，想说的是以下这点：

4、js中为对象添加事件监控

element.addEventListener("event","fun","boolen");

event:表示事件

fun:指的是事件触发后执行的函数

项目地址：https://github.com/baixuexiyang/drag

实例：

var drag = new Drag("test", {      onStart: function(){      },      onMove: function(){        document.getElementById('position').innerHTML = '距离左边：' + drag.getPositions().left + '；距离顶部：' + drag.getPositions().top;      },      onStop: function(){      }    });

我们再开看一个实例中遇到的问题，这个问题我弄了好久都找不出很好的解决方法

我们来看个例子：（方便测试，我把代码写在一个文件里面）

drag.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   <title>鼠标拖拽</title>   <style type="text/css">     <!--     #dragdiv{       background-color:#0A0909;       height:200px;       width:157px;            position:absolute;     }     .ondrag{       filter:alpha(opacity=200);       cursor:move;     }     .enddrag{       filter:alpha(opacity=100);       cursor:default;     }     #father{       width:600px;       height:700px;       background:#C63535;     }     -->   </style> </head> <body>   <div id="father">   <div id="dragdiv"></div>   </div>   <script language="JavaScript">     var dragdiv=document.getElementById("dragdiv");     var father=document.getElementById("father");     var offsetx=0;     var offsety=0;     var draging=false;     function beforeDrag(ev){                if (!draging) {           draging = true;           var l = dragdiv.offsetLeft;           var t = dragdiv.offsetTop;           offsetx = ev.clientX - l;           offsety = ev.clientY - t;                    }         else {           dragdiv.className = "enddrag";           dragdiv.removeEventListener("mousemove",onDrag);           draging = false;           return;         }            }     function endDrag(){       draging=false;       dragdiv.className="enddrag";     }     function onDrag(ev){       if (!draging) {         dragdiv.className = "enddrag";         return;       }       else {         dragdiv.className = "ondrag";                dragdiv.style.left = (ev.clientX - offsetx) + "px";         dragdiv.style.top = (ev.clientY - offsety) + "px";                }     }       dragdiv.addEventListener("mousedown",beforeDrag,true);       dragdiv.addEventListener("mousemove",onDrag,false);       dragdiv.addEventListener("mouseup",endDrag,true);    </script>  </body>  </html>

上一篇：Linux下为Node.js程序配置MySQL或Oracle数据库的方法

下一篇：悬浮广告方法日常收集整理