jsで横方向にドラッグしてナビゲーションバーを機能させる

以下は効果です：

以下はコードです：

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">-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: 蓝色实线 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 + theDiv.css({left: lastPos.x, '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 + theDiv.css({left: lastPos.x, '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>

これで本文のすべてが終わりました。本文の内容が皆様の学習や仕事に少しでも役立つことを願っています。また、ナイアラチュートリアルを多くのサポートをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーにより自発的に貢献し、自己でアップロードされた内容であり、本サイトは所有権を持ちません。また、人工的な編集は行われておらず、関連する法的責任も負いません。著作権侵害を疑われる内容が見つかった場合は、メールを送信して：notice#oldtoolbag.com（メール送信時は、#を@に変更して報告してください。関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。）

基礎教程