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 투명;
  }
 </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" >도5</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 + });
    // 새로운 요소를 생성하여 드래그 요소 앞의 위치(실선 테두리)에 삽입합니다
    $("<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 + , top: lastPos.y + });
   // 요소를 드래그하여 마우스와 함께 이동하면 삽입할 대상 요소를 찾습니다
   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>

이것이 본 문서의 전부입니다. 본 문서의 내용이 여러분의 학습이나 업무에 도움이 되길 바라며,呐喊 강의에 많은 지원을 부탁드립니다!

선언: 본문 내용은 인터넷에서 가져왔으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 웹사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있는 내용을 발견하시면 notice#w로 이메일을 보내 주시기 바랍니다。3codebox.com（보내는 이메일에서 #을 @으로 변경하시오）를 통해 신고하시고 관련 증거를 제공하시면, 사실이 확인되면 해당 도메인의 내용을 즉시 삭제하겠습니다。

기본 가이드