js实现横向拖拽导航条功能


Posted in Javascript onFebruary 17, 2017

效果如下:

js实现横向拖拽导航条功能

代码如下:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>div横向拖拽排序</title>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
 <style type="text/css">
  body, div {
   padding: 0px;
   margin: 0px;
  }
  .box {
   position: relative;
   margin-left: 15px;
   padding: 10px;
   padding-right: 0px;
   width: 810px;
   border: blue solid 1px;
  }
  .box ul{
   list-style: none;
   overflow: hidden;
   padding: 0;
   margin:0;
  }
  .drag {
   float: left;
   border: #000 solid 1px;
   text-align: center;
  }
  .box ul li a{
   display: block;
   padding: 10px 25px;
  }
  .drag-dash {
   position: absolute;
   border: #000 solid 1px;
   background: #ececec;
  }
  .dash {
   float: left;
   border: 1px solid transparent;
  }
 </style>
</head>
<body>
<h1>div横向拖拽排序</h1>
<div class="box">
 <ul>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航一</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航二导航</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航导航导航三</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导航导航四</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >导五</a></li>
 </ul>
</div>
<script type="text/javascript">
 $(document).ready(function () {
  var range = {x: 0, y: 0};//鼠标元素偏移量
  var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; //拖拽对象的四个坐标
  var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; //目标元素对象的坐标初始化
  var theDiv = null, move = false;
  var choose = false; //拖拽对象 拖拽状态 选中状态
  var theDivId = 0, theDivHeight = 0, theDivHalf = 0;
  var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
  var tarDiv = null, tarFirst, tempDiv; //要插入的目标元素的对象, 临时的虚线对象
  var initPos = {x: 0, y: 0};
  var theDivWidth;//拖拽对象的宽度
  $(".drag").each(function () {
   $(this).mousedown(function (event) {
    choose = true;
    //拖拽对象
    theDiv = $(this);
    //记录拖拽元素初始位置
    initPos.x = theDiv.position().left;
    initPos.y = theDiv.position().top;
    //鼠标元素相对偏移量
    range.x = event.pageX - theDiv.position().left;
    range.y = event.pageY - theDiv.position().top;
    theDivId = theDiv.index();
    theDivWidth = theDiv.width();
    theDivHalf = theDivWidth / 2;
    theDiv.removeClass("drag");
    theDiv.addClass("drag-dash");
    theDiv.css({left: initPos.x + 'px', top: initPos.y + 'px'});
    // 创建新元素 插入拖拽元素之前的位置(虚线框)
    $("<div class='dash'></div>").insertBefore(theDiv);
    tempDiv = $(".dash");
    $(".dash").css("width" , theDivWidth);
    return false
   });
  });
  $(document).mouseup(function (event) {
   if (!choose) {
    return false;
   }
   if (!move) {
    //恢复对象的初始样式
    theDiv.removeClass("drag-dash");
    theDiv.addClass("drag");
    tempDiv.remove(); // 删除新建的虚线div
    choose = false;
    return false;
   }
   theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
   //恢复对象的初始样式
   theDiv.removeClass("drag-dash");
   theDiv.addClass("drag");
   tempDiv.remove(); // 删除新建的虚线div
   move = false;
   choose = false;
   return false
  }).mousemove(function (event) {
   if (!choose) {return false}
   move = true;
   lastPos.x = event.pageX - range.x;
   lastPos.y = event.pageY - range.y;
   lastPos.x1 = lastPos.x + theDivWidth;
   // 拖拽元素随鼠标移动
   theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
   // 拖拽元素随鼠标移动 查找插入目标元素
   var $main = $('.drag'); // 局部变量:按照重新排列过的顺序 再次获取 各个元素的坐标,
   $main.each(function () {
    tarDiv = $(this);
    tarPos.x = tarDiv.position().left;
    tarPos.y = tarDiv.position().top;
    tarPos.x1 = tarPos.x + tarDiv.width() / 2;
    tarFirst = $main.eq(0); // 获得第一个元素\
    tarFirstX = tarFirst.position().left + theDivHalf; // 第一个元素对象的中心纵坐标
    //拖拽对象 移动到第一个位置
    if (lastPos.x <= tarFirstX) {
     tempDiv.insertBefore(tarFirst);
    }
    //判断要插入目标元素的 坐标后, 直接插入
    if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
     tempDiv.insertAfter(tarDiv);
    }
   });
   return false
  });
 });
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
javascript实现点击星星小游戏
Dec 24 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
js转换对象为xml
Feb 17 #Javascript
EsLint入门学习教程
Feb 17 #Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 #Javascript
AngularJS执行流程详解
Feb 17 #Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 #Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 #Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 #Javascript
You might like
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
php实现记事本案例
2020/10/20 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
jQuery鼠标事件总结
2016/10/13 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python实现名片管理系统
2018/11/29 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
垃圾回收的优点和原理
2014/05/16 面试题
银行实习的自我鉴定
2013/12/10 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
航班延误投诉信
2015/07/02 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android