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 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
简单理解vue中Props属性
Oct 27 Javascript
Node.js简单入门前传
Aug 21 Javascript
深入理解React高阶组件
Sep 28 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
JavaScript中layim之整合右键菜单的示例代码
Feb 06 Javascript
JavaScript仿京东轮播图效果
Feb 25 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
jQuery.extend 函数的详细用法
2012/06/27 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python 网络编程常用代码段
2016/08/28 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
Python OpenCV获取视频的方法
2018/02/28 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
简述数据库的设计过程
2015/06/22 面试题
宿舍卫生检讨书
2014/01/16 职场文书
学生思想表现的评语
2014/01/30 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
初三毕业感言
2015/07/31 职场文书
中学生运动会广播稿
2015/08/19 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
python实现图片批量压缩
2021/04/24 Python
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python