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 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
jQuery瀑布流插件Wookmark使用实例
Apr 02 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
JS前端知识点总结之内置对象,日期对象和定时器相关操作
Jul 05 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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
Zerg剧情介绍
2020/03/14 星际争霸
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
javascript iframe内的函数调用实现方法
2009/07/19 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
python多进程操作实例
2014/11/21 Python
Python计算程序运行时间的方法
2014/12/13 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
乳制品整治工作方案
2014/05/29 职场文书
教室标语大全
2014/06/21 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android