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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
node+express制作爬虫教程
Nov 11 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
vue实现树形菜单效果
Mar 19 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
如何使用七牛Python SDK写一个同步脚本及使用教程
2015/08/23 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
使用python爬取B站千万级数据
2018/06/08 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python字典按照value排序方法
2020/12/28 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
大一学生个人总结
2015/02/15 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
爱护环境建议书
2015/09/14 职场文书