js Implement Horizontal Drag Navigation Bar Function

The effect is as follows:

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>div horizontal drag and drop sorting</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 Horizontal drag and drop sorting</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" >Navigation One</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navigation Two</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navigation Navigation Three</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navigation Navigation Four</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Lead five</a></li>
 </ul>
</div>
<script type="text/javascript">
 $.ready(function () {
  var range = {x: 0, y: 0};//Mouse element offset
  var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; //Four coordinates of the drag object
  var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; //Initialization of the coordinates of the target element object
  var theDiv = null, move = false;
  var choose = false; //Drag object, drag state, selected state
  var theDivId = 0, theDivHeight = 0, theDivHalf = 0;
  var tarFirstY = 0; //Initialization of the index, height of the drag object
  var tarDiv = null, tarFirst, tempDiv; //Object of the target element to be inserted, temporary dashed line object
  var initPos = {x: 0, y: 0};
  var theDivWidth;//Width of the drag object
  $(".drag").each(function () {
   $.mousedown(function (event) {
    choose = true;
    //Drag object
    theDiv = $(this);
    //Record the initial position of the dragged element
    initPos.x = theDiv.position().left;
    initPos.y = theDiv.position().top;
    //Mouse element relative offset amount
    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');
    // Create a new element and insert it at the position before the dragged element (dashed box)
    $("<div class='dash'></div>").insertBefore(theDiv);
    tempDiv = $(".dash");
    $(".dash").css("width", theDivWidth);
    return false
   });
  });
  $.mouseup(function (event) {
   if (!choose) {
    return false;
   }
   if (!move) {
    //Restore the initial style of the object
    theDiv.removeClass("drag-dash");
    theDiv.addClass("drag");
    tempDiv.remove(); // Delete the newly created dashed div
    choose = false;
    return false;
   }
   theDiv.insertBefore(tempDiv); // Drag the element and insert it into the position of the dashed div
   //Restore the initial style of the object
   theDiv.removeClass("drag-dash");
   theDiv.addClass("drag");
   tempDiv.remove(); // Delete the newly created dashed 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;
   // Drag elements and move with the mouse
   theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px');
   // Drag elements and move with the mouse to find the insertion target element
   var $main = $('.drag'); // Local variables: Get the coordinates of each element again in the order of rearrangement
   $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); // Get the first element\
    tarFirstX = tarFirst.position().left + theDivHalf; // The vertical center coordinate of the first element object
    //Drag the object to the first position
    if (lastPos.x <= tarFirstX) {
     tempDiv.insertBefore(tarFirst);
    }
    //After determining the coordinates of the target element to be inserted, insert it directly
    if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
     tempDiv.insertAfter(tarDiv);
    }
   });
   return false
  });
 });
</script>
</body>
</html>

That's all for this article. I hope the content of this article can bring you some help in learning or work, and I also hope to support the呐喊 tutorial more!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When reporting, please replace # with @) for reporting violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.

Basic Tutorial