javascript拖拽应用实例


Posted in Javascript onMarch 25, 2016

之前文章中也讲了一下拖拽的基本思想,理论是有了,那实践呢,可以运用到什么地方呢?下面就给大家带来一个用拖拽思想写的一个小实例,供大家参考,大致效果看下图:

javascript拖拽应用实例

就是这样一个简单的一个拖拽条,你可以把它理解为滚动条,也可以理解为表单中的数量选择控件,也可以理解为进度条,等等,反正你可以改成很多你想要的效果,废话不多说,我们来看看这个是怎么做的吧!

想了想,感觉原理就不用说了吧,我在拖拽效果中就已经说的很清楚了,不清楚的同学可以出门左转,查看 javascript小实例,PC网页里的拖拽 ,我就直接贴代码了:

css:

<style>
#drag_wrap{
  width:220px;
  height:10px;
  position:relative;
  margin:100px auto;
}
.dis_bg{
  width:200px;
  height:10px;
  border-radius:10px;
  background:#ccc;
  margin-left:10px;
}
#drag_bg{
  width:0;
  height:10px;
  border-radius:10px;
  background:#0CF;
}
#drag_box{
  width:20px;
  height:20px;
  border-radius:10px;
  background:#F30;
  position:absolute;
  top:-5px;
  left:0;
  cursor:move;
}
#drag_box span{
  width:40px;
  height:20px;
  text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  position:absolute;
  top:-25px;
  left:-10px;
  color:#333;
  background:#fff;
}
#drag_wrap1{
  width:10px;
  height:220px;
  position:relative;
  margin:100px auto;
}
.dis_bg1{
  width:10px;
  height:200px;
  border-radius:10px;
  background:#ccc;
  position:absolute;
  top:10px;
}
#drag_bg1{
  width:10px;
  height:0;
  border-radius:10px;
  background:#0CF;
}
#drag_bg1{
  width:10px;
  height:0;
  border-radius:10px;
  background:#0CF;
}
#drag_box1{
  width:20px;
  height:20px;
  border-radius:10px;
  background:#F30;
  position:absolute;
  top:-5px;
  left:-5px;
  cursor:move;
}
#drag_box1 span{
  width:40px;
  height:20px;
  text-align:center;
  line-height:20px;
  border:1px solid #ccc;
  position:absolute;
  top:0;
  left:25px;
  color:#333;
  background:#fff;
}
</style>

html:

<div id="drag_wrap">
    <div class="dis_bg">
      <div id="drag_bg"></div>
    </div>
    <div id="drag_box"><span>0</span></div>
     
  </div>
  <div id="drag_wrap1">
    <div class="dis_bg1">
      <div id="drag_bg1"></div>
    </div>
    <div id="drag_box1"><span>0</span></div>
  </div>

JavaScript:

window.onload = function(){
 
    drag("drag_box","drag_wrap","drag_bg","left");
    drag("drag_box1","drag_wrap1","drag_bg1","top");
     
    function drag(obj,parentNode,bgObj,attr,endFn){
      var obj = document.getElementById(obj);
      var parentNode = document.getElementById(parentNode);
      var bgObj = document.getElementById(bgObj);
      var oNum = obj.getElementsByTagName('span')[0];
      obj.onmousedown = function(ev){
        var ev = ev || event;
         
        //非标准设置全局捕获(IE)
        if(obj.setCapture){
          obj.setCapture()  
        };
 
        var disX = ev.clientX - this.offsetLeft,
          disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,
          oHeight = obj.offsetHeight;
        var pWidth = parentNode.offsetWidth,
          pHeight = parentNode.offsetHeight;     
        document.onmousemove = function(ev){
          var ev = ev || event;
          if(attr == "left"){ //横向
            var left = ev.clientX - disX;
            //左侧
            if(left <= 0){
              left = 0;
            }else if(left > pWidth - oWidth){//右侧
              left = pWidth - oWidth;
            };
            obj.style.left = bgObj.style.width = left + 'px';
            oNum.innerHTML = left;
             
          }else if(attr == "top"){ //竖向
            var top = ev.clientY - disY;
             //上面
            if(top <= 0){
              top = 0;
            }else if(top > pHeight - oHeight){//下面
              top = pHeight - oHeight;
            };
            obj.style.top = bgObj.style.height = top + 'px';
            oNum.innerHTML = top;
          };
           
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
          endFn && endFn();
          //非标准释放全局捕获(IE)
          if(obj.releaseCapture){
            obj.releaseCapture()  
          };
 
        };
        return false;
      }; 
    } 
   
  }

参数说明:

这里给了5个参数,obj,parentNode,bgObj,attr,endFn,分别是:

obj:被拖拽对象

parentNode:限制被拖拽对象活动区域的对象,一般设为它的父级

bgObj:拖动时的表色背景对象

attr:2个参数left,top,表示是横向拖拽还是纵向拖拽

endFn:返回函数,有就执行,没有就不执行,非必填

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
JavaScript学习笔记之创建对象
Mar 25 #Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 #Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 #Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 #Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 #Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 #Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 #Javascript
You might like
文章推荐系统(二)
2006/10/09 PHP
使用php来实现网络服务
2009/09/15 PHP
php封装的page分页类完整实例
2016/10/18 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
用python爬取租房网站信息的代码
2018/12/14 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
python基础之文件处理知识总结
2021/05/23 Python
Python函数中的不定长参数相关知识总结
2021/06/24 Python