JavaScript限定范围拖拽及自定义滚动条应用(3)


Posted in Javascript onMay 17, 2017

两个对象:div1 和 div2,其中div1是div2的父元素,div2只能在div1的范围内拖拽

JavaScript限定范围拖拽及自定义滚动条应用(3)

图中,红点是鼠标的位置,两个绿色箭头相减的结果就是disX,最后oEvent.clientX - disX 就是绿色箭头的部分,这个长度就是判断是否“出格”的依据,也就是这个短的绿色箭头范围应该在0 ~ div2.offsetWidth - div1.offsetWidth之间!

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>客户区可见范围限制拖拽</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  #div1 {
   width: 500px;
   height: 500px;
   background: orange;
   position: relative;
   left: 100px;
   top: 30px;
  }
  #div2 {
   width: 100px;
   height: 100px;
   background: black;
   position: absolute;
   border: 1px solid blue;
  }
 </style>
</head>
<body>
 <div id="div1">
  <div id="div2"></div>
 </div>

 <script type="text/javascript">
  var oDiv1 = document.getElementById('div1');
  var oDiv2 = document.getElementById('div2');

  function getStyle(obj, attr) {
   if (obj.currentStyle) {
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, null)[attr];
   }
  }
  oDiv2.onmousedown = function(ev) {
   var oEvent = ev || event;
   // var disX = oEvent.clientX - oDiv2.offsetLeft;
   // var disY = oEvent.clientY - oDiv2.offsetTop;
   var disX = oEvent.clientX - parseInt(getStyle(oDiv2, 'left'));
   var disY = oEvent.clientY - parseInt(getStyle(oDiv2, 'top'));

   document.onmousemove = function(ev) {
    var oEvent = ev || event;
    var l = oEvent.clientX - disX;
    var t = oEvent.clientY - disY;


    if (l < 0) {
     l = 0;
    } else if (l > oDiv1.offsetWidth - /*parseInt(getStyle(oDiv2,'width'))*/oDiv2.offsetWidth) {
     l = oDiv1.offsetWidth - oDiv2.offsetWidth;
    }
    if (t < 0) {
     t = 0;
    } else if (t > oDiv1.offsetHeight - oDiv2.offsetHeight) {
     t = oDiv1.offsetHeight - oDiv2.offsetHeight;
    }
    oDiv2.style.left = l + 'px';
    oDiv2.style.top = t + 'px';
   };


   document.onmouseup = function() {
    document.onmousemove = null;//如果不取消,鼠标弹起div依旧会随着鼠标移动
    document.onmouseup = null;
   };
  };
 </script>
</body>
</html>

基于上述原理,我们来做一个自定义滚动条,通过拖拽滚动条的位置来控制另一个对象的大小,比如一幅图。

JavaScript限定范围拖拽及自定义滚动条应用(3)

JavaScript限定范围拖拽及自定义滚动条应用(3)

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>自定义滚动条</title>
 <style type="text/css">
 #div1 {
  width: 600px;
  height: 20px;
  background: orange;
  position: relative;
  margin: 50px auto;
 }
 #div2 {
  width: 20px;
  height: 20px;
  background: green;
  position: absolute;
 }
 #div3 {
  width: 0;
  height: 0;
  margin: 20px auto;
 }
 #div3 img {
  width: 100%;
  height: 100%;
 }
 </style>
</head>
<body>
 <div id="div1">
 <div id="div2"></div>
 </div>
 <div id="div3">
 <img src="https://timgsa.baidu.com/141128%2F201411281041075742.jpg">
 </div>
 <script type="text/javascript">
 var oDiv1 = document.getElementById('div1');
 var oDiv2 = document.getElementById('div2');
 var oDiv3 = document.getElementById('div3');
 oDiv2.onmousedown = function(ev) {
  var oEvent = ev || event;
  var disX = oEvent.clientX - oDiv2.offsetLeft;

  document.onmousemove = function(ev) {
  var oEvent = ev || event;
  var l = oEvent.clientX - disX;
  if (l < 0) {
   l = 0;
  } else if (l > oDiv1.offsetWidth - oDiv2.offsetWidth) {
   l = oDiv1.offsetWidth - oDiv2.offsetWidth;
  }
  oDiv2.style.left = l + 'px';//l范围:[0,580]
  //document.title = l / 580; //范围:[0,1]
  var ratio = oDiv1.offsetWidth - oDiv2.offsetWidth;
  var scale = l / ratio;
  var w = 600 * scale;
  var h = 370 * scale;
  console.log(w);
  oDiv3.style.cssText = ';width:' + w + 'px;height:' + h +'px;';

  };

  document.onmouseup = function() {
  document.onmousemove = null;
  document.onmouseup = null;
  };
 };
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
vue 中固定导航栏的实例代码
Nov 01 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 #Javascript
12个非常有用的JavaScript技巧
May 17 #Javascript
Javascript中的async awai的用法
May 17 #Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 #Javascript
angular.fromJson与toJson方法用法示例
May 17 #Javascript
Node.js编写CLI的实例详解
May 17 #Javascript
ES6入门教程之Class和Module详解
May 17 #Javascript
You might like
example2.php
2006/10/09 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
javascript web页面刷新的方法收集
2009/07/02 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
Js经典案例的实例代码
2018/05/10 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python Sql数据库增删改查操作简单封装
2016/04/18 Python
python实现分页效果
2017/10/25 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
建材业务员岗位职责
2013/12/08 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
大学活动总结模板
2014/07/10 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python