关闭

原生js拖拽功能制作滑动条实例教程

时间: 2021-01-08阅读: 100标签: 拖拽

拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素,先把html代码写出来,如下所示:

<div class="bar_wrap" id="wrap"><!--外包裹元素-->
  <div class="bar_container"><!--滑动条-->
    <div class="bar_into"></div><!--滑动痕迹-->
  </div>
  <div class="bar_drag"><!--滑块-->
    <div class="bar_text"></div><!--文本-->
  </div>
</div>

然后给各元素添加css样式,完成下图效果:


接下来通过分析功能,一步一步完成js代码。


1. 获取滑动条各个元素,代码如下:

  //获取外包裹元素
  var eBarWrap = document.getElementById('wrap');
  //获取滑动条
  var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
  //获取滑动痕迹元素
  var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
  //获取滑块
  var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
  //获取文本元素
  var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];


2. 获取滑动最大值
因为滑块只能在滑动条内滑动,所以需要限制最大滑动位置。而DOM元素计算位置是从元素的左侧开始,所以最大值应该是 滑动条的宽度-滑块 的宽度,如下所示:

  //获取最大位置
  var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth; 


3. 在滑块上绑定鼠标按下事件函数,实现拖拽滑块功能,代码如下:

  //滑块添加拖拽事件
  eBarDrag.addEventListener('mousedown',function(event){
    
  });

3.1 获取滑块位置
需要拖动滑块,肯定要先知道滑块原来的位置,才能根据鼠标的移动来拖拽滑块。在滑块上绑定的事件函数上有传入一个event对象,这个event对象代表当前事件的实例对象,包含当前事件相关信息。如下所示:

  //滑块添加拖拽事件
  eBarDrag.addEventListener('mousedown',function(event){
    //初始化鼠标开始拖拽的点击位置
    var nInitX = event.clientX;
    //初始化滑块位置
    var nInitLeft = this.offsetLeft;
  });

3.2 滑块跟随鼠标移动,修改滑动痕迹和文本数值
操作时,在滑块上按下鼠标,再移动鼠标就可以使滑块跟随鼠标移动。但一般移动鼠标不可能只在滑动条上面移动,所以需要在页面上绑定鼠标移动事件,如下所示:

  //滑块添加拖拽事件
  eBarDrag.addEventListener('mousedown',function(event){
    /*...*/

    //页面绑定鼠标移动事件
    document.onmousemove = event=>{
      //鼠标移动时取消默认行为,避免选中其他元素或文字
      event.preventDefault();
      //获取鼠标移动后滑块应该移动到的位置
      let nX = event.clientX - nInitX + nInitLeft;
      //限制滑块最大移动位置
      if(nX>=nMax){
        nX = nMax;
      }
      //限制滑块最小移动位置
      if(nX<=0){
        nX = 0;
      }
      //修改滑块位置(因为用的是箭头函数,所以this还是指向滑块)
      this.style.left = nX + 'px';
      //修改滑动痕迹宽度
      eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
      //修改文本数值
      eBarText.innerhtml = Math.ceil(nX/nMax*100)/10;
    };
  });

3.3 释放鼠标时,固定滑块位置
当释放鼠标的时候,滑块固定在当前移动到的位置,滑动痕迹和文本数值已经一起修改。

  //滑块添加拖拽事件
  eBarDrag.addEventListener('mousedown',function(event){
    /*...*/

    //鼠标松开绑定事件,取消页面上所有事件
    document.onmouseup = function(event){
      document.onmousemove = null;
      document.onmouseup = null;
    }
  });

鼠标按下事件函数就完成了。滑动条的样式都可以通过css实现,但默认文本数值是空的,这不太合理,所以需要加多一句代码,给文本元素默认赋值为0,如下所示:

  //修改默认数值
  eBarText.innerHTML = 0;

 

4. 在滑动条上添加点击事件
当点击滑动条上除滑块之外的位置时,滑块应该直接滑动到鼠标点击的位置。需要在滑动条上添加点击事件实现此功能,代码如下:

  //滑动条添加点击事件
  eBarCon.addEventListener('click',function(event){
    //设置滑动条位置
    var nLeft = this.offsetLeft;
    //获取有定位的父元素
    var eParent = this.offsetParent;
    //循环所有有定位的父元素
    while(eParent){
      //添加定位父元素offsetLeft值,用于准确定位滑动条与页面左侧的距离 
      nLeft += eParent.offsetLeft;
      //再次获取父元素外的定位父元素
      eParent = eParent.offsetParent;
    }
    //计算滑块位置
    var nX = event.clientX - nLeft;
    //修改滑块位置
    eBarDrag.style.left = nX +'px';
    //修改滑动痕迹宽度
    eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
    //修改文本数值
    eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
  });

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10151

JS 仿头条App频道编辑功能 (拖拽排序,添加,删减)

由于,项目中使用App混合开发,要实现频道编辑功能;在没找到合适的解决方案的情况下,自己写了这个库;已经在项目中跑了2年多,有不错的可用性;写下这篇文章分享下

Vue自定义指令:通过Vue.directive实现集成第三方插件,拖拽功能,图片加载等功能

当我们需要对Dom元素进行底层操作的时候,这时候我们就需要使用vue的自定义指令。这篇文章将讲解:如何注册Vue自定义指令?Vue的钩子函数,vue钩子函数参数,vue实现拖拽功能,实现图片加载功能,Vue自定义指令集成第三方插件 ...

原生js实现拖拽与拖放事件,JavaScript实现元素拖拽、图片到指定区域进行预览的例子

拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改。原生Js实现元素拖拽、图片到指定区域进行预览的方法实现

基于Vue + Axios封装上传组件,并支持拖拽文件

上传的时候用到了 axios 的 onUploadProgress 来维护上传进度和当前文件的上传状态,用于开发上传中的样式;上面的 hanldeFiles 调用了 readFiles 方法,这是处理文件的主要逻辑

vue-grid-layout拖拽布局实现空位添加新元素

项目中遇到要做一个报表的仪表盘,每一个卡片内是一个报表,报表有不同类型,每一种类型有其特定的尺寸。允许选择报表并添加到仪表盘。允许通过拖拽调整每个卡片位置和卡片的大小

实现平滑过渡的拖拽排序

最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下

vue元素拖拽、移动

使用范围:两个元素位置交换,移动元素到指定位置,另外如需有需监听元素的拖拽情况,可调用对应的函数即可。如果不允许拖动到该元素区域内,可在dragover、dragenter中设置dropEffect:none;禁止拖拽。

vue模块拖拽实现

正巧在之前面试中遇到问实现拖拽效果。当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事,把这个东西实现了一下。原理很简单,写的很方便。

Element ui表格组件+sortablejs实现行拖拽排序

运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便;实现方式:template部分、script部分

实现一个美化原生拖拽的draggable-polyfill

在HTML5还未普及之前,实现元素的拖拽还算是一件比较麻烦的事,大概思路就是监听鼠标移动相关事件,下面是伪代码;HTML5新增了拖放draggable标准,拖拽就变得简单了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!