Implementazione della funzione di trascinamento orizzontale della barra di navigazione in JavaScript

效果如下：

代码如下：

<!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: nascosto;
   padding: 0;
   margin:0;
  }
  .drag {
   float: left;
   border: #000 solid 1px;
   text-align: centro;
  }
  .box ul li a{
   display: blocco;
   padding: 10px 25px;
  }
  .drag-dash {
   position: assoluto;
   border: #000 solid 1px;
   background: #ececec;
  }
  .dash {
   float: left;
   border: 1px solid trasparente;
  }
 </style>
</head>
<body>
<h1>Ordinamento orizzontale trascinamento 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" >Navigazione uno</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navigazione due navigazione</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navigazione navigazione navigazione tre</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navigazione navigazione quattro</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'});
    // Creare un nuovo elemento e inserirlo prima dell'elemento di trascinamento (la cornice tratteggiata)
    $("<div class='dash'></div>").insertBefore(theDiv);
    tempDiv = $(".dash");
    $(".dash").css("width", theDivWidth);
    return false
   });
  });
  $(document).mouseup(function (event) {
   if (!choose) {
    return false;
   }
   if (!move) {
    // Ripristinare lo stile iniziale dell'oggetto
    theDiv.removeClass("drag-dash");
    theDiv.addClass("drag");
    tempDiv.remove(); // Eliminare il div tratteggiato creato
    choose = false;
    return false;
   }
   theDiv.insertBefore(tempDiv); // Inserire l'elemento di trascinamento nel posto del div tratteggiato
   // Ripristinare lo stile iniziale dell'oggetto
   theDiv.removeClass("drag-dash");
   theDiv.addClass("drag");
   tempDiv.remove(); // Eliminare il div tratteggiato creato
   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;
   // L'elemento di trascinamento si muove con il mouse
   theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
   // Trovare l'elemento di destinazione di inserimento mentre l'elemento di trascinamento si muove con il mouse
   var $main = $('.drag'); // Variabile locale: ottenere di nuovo le coordinate di ciascun elemento in ordine di riorganizzazione
   $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); // Ottenere il primo elemento\
    tarFirstX = tarFirst.position().left + theDivHalf; // Coordinata verticale centrale dell'oggetto della prima elemento
    //Spostare l'oggetto trascinato alla prima posizione
    if (lastPos.x <= tarFirstX) {
     tempDiv.insertBefore(tarFirst);
    }
    //Giudicare l'elemento da inserire nel punto di coordinate, inserire direttamente
    if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
     tempDiv.insertAfter(tarDiv);
    }
   });
   return false
  });
 });
</script>
</body>
</html>

Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo possa aiutarti a imparare o lavorare meglio, e speriamo anche di ricevere molta supporto per il tutorial URL!

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è della proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato elaborato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Manuale di base