javascript实现dom元素可拖动


Posted in Javascript onMarch 21, 2016

摘要:

最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面。最终决定做一个在固定宽和高的位置,用户可以拖动图片查看。所以自己就写了一个支持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>

代码很简单,肯用一点点心看的话,都能看懂了

第一次拖拽很成功,按住鼠标进行拖。第二次就不正常了,要想第二次正常,必须鼠标点一下其他地方(就是非拖拽部分)

上面的鼠标事件

"mousedown”是指按下鼠标时触发此事件,(上面触发了beforeDrag函数)

"mousemove"指鼠标移动时触发此事件,(上面触发了onDrag函数)

"mouseup"指鼠标按下后松开鼠标时触发此事件。(上面触发了endDrag函数)

ps:网上查的鼠标时间是"onmousedown",笔者实验"onmousedown"没有事件响应,"mousedowm"才正常

上面所说的问题,尝试了很多实验,考虑到了addEventListener的顺序问题,第三个参数true/false的事件流问题,还是没有找到完美的解决方法

"mouseup"事件在第二次监控就失败了,重新获取焦点才正常(就是鼠标点一下其他地方)

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
JS实现滑动导航效果
Jan 14 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 #Javascript
浅析AngularJS中的指令
Mar 20 #Javascript
简述Matlab中size()函数的用法
Mar 20 #Javascript
详解Matlab中 sort 函数用法
Mar 20 #Javascript
Sort()函数的多种用法
Mar 20 #Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 #Javascript
JavaScript的函数式编程基础指南
Mar 19 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
28个JS验证函数收集
2010/03/02 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
vue实现两个区域滚动条同步滚动
2020/12/13 Vue.js
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
python实现录音小程序
2020/10/26 Python
python pycharm的安装及其使用
2019/10/11 Python
python一些性能分析的技巧
2020/08/30 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
什么是servlet链?
2014/07/13 面试题
运动会领导邀请函
2014/01/10 职场文书
国培远程培训感言
2014/03/08 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
甲午风云观后感
2015/06/02 职场文书
《火烧云》教学反思
2016/02/23 职场文书