Home > Article > Web Front-end > How to use js to implement horizontal drag and drop navigation bar function

How to use js to implement horizontal drag and drop navigation bar function

不言Original: 2018-06-25 14:13:292012browse

This article mainly introduces the js method to implement the horizontal drag and drop navigation bar function. It has a very good reference value, let’s take a look at it

The effect is as follows:

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>p横向拖拽排序</title>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
 <style type="text/css">
  body, p {
   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>p横向拖拽排序</h1>
<p 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>
</p>
<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 thep = null, move = false;
  var choose = false; //拖拽对象 拖拽状态 选中状态
  var thepId = 0, thepHeight = 0, thepHalf = 0;
  var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
  var tarp = null, tarFirst, tempp; //要插入的目标元素的对象, 临时的虚线对象
  var initPos = {x: 0, y: 0};
  var thepWidth;//拖拽对象的宽度
  $(".drag").each(function () {
   $(this).mousedown(function (event) {
    choose = true;
    //拖拽对象
    thep = $(this);
    //记录拖拽元素初始位置
    initPos.x = thep.position().left;
    initPos.y = thep.position().top;
    //鼠标元素相对偏移量
    range.x = event.pageX - thep.position().left;
    range.y = event.pageY - thep.position().top;
    thepId = thep.index();
    thepWidth = thep.width();
    thepHalf = thepWidth / 2;
    thep.removeClass("drag");
    thep.addClass("drag-dash");
    thep.css({left: initPos.x + &#39;px&#39;, top: initPos.y + &#39;px&#39;});
    // 创建新元素 插入拖拽元素之前的位置(虚线框)
    $("<p class=&#39;dash&#39;></p>").insertBefore(thep);
    tempp = $(".dash");
    $(".dash").css("width" , thepWidth);
    return false
   });
  });
  $(document).mouseup(function (event) {
   if (!choose) {
    return false;
   }
   if (!move) {
    //恢复对象的初始样式
    thep.removeClass("drag-dash");
    thep.addClass("drag");
    tempp.remove(); // 删除新建的虚线p
    choose = false;
    return false;
   }
   thep.insertBefore(tempp); // 拖拽元素插入到 虚线p的位置上
   //恢复对象的初始样式
   thep.removeClass("drag-dash");
   thep.addClass("drag");
   tempp.remove(); // 删除新建的虚线p
   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 + thepWidth;
   // 拖拽元素随鼠标移动
   thep.css({left: lastPos.x + &#39;px&#39;, top: lastPos.y + &#39;px&#39;});
   // 拖拽元素随鼠标移动 查找插入目标元素
   var $main = $(&#39;.drag&#39;); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
   $main.each(function () {
    tarp = $(this);
    tarPos.x = tarp.position().left;
    tarPos.y = tarp.position().top;
    tarPos.x1 = tarPos.x + tarp.width() / 2;
    tarFirst = $main.eq(0); // 获得第一个元素\
    tarFirstX = tarFirst.position().left + thepHalf; // 第一个元素对象的中心纵坐标
    //拖拽对象 移动到第一个位置
    if (lastPos.x <= tarFirstX) {
     tempp.insertBefore(tarFirst);
    }
    //判断要插入目标元素的 坐标后， 直接插入
    if (lastPos.x >= tarPos.x - thepHalf && lastPos.x1 >= tarPos.x1) {
     tempp.insertAfter(tarp);
    }
   });
   return false
  });
 });
</script>
</body>
</html>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to PHP Chinese website!

Related recommendations:

JS and CSS to pop up a DIV box with a buffered animation gradient effect after the mouse passes

##Use JS Achieve displaying/hiding window fixed position elements as the page scrolls

The above is the detailed content of How to use js to implement horizontal drag and drop navigation bar function. For more information, please follow other related articles on the PHP Chinese website!

php css JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analysis on how to use jquery UI Datepicker time controlNext article：Analysis on how to use jquery UI Datepicker time control

See more

How to use js to implement horizontal drag and drop navigation bar function

Related articles