Implementação da função de arrasto horizontal no navegador js

Efeito如下：

Código如下：

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>div arrastar e ordenar horizontalmente</title>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
 <style type="text/css">
  body, div {
   preenchimento: 0px;
   margem: 0px;
  }
  .box {
   posição: relativa;
   margem-esquerda: 15px;
   padding: 10px;
   preenchimento-direita: 0px;
   largura: 810px;
   border: azul sólido 1px;
  }
  .box ul{
   list-style: none;
   overflow: hidden;
   padding: 0;
   margin:0;
  }
  .drag {
   float: left;
   border: #000 sólido 1px;
   text-align: center;
  }
  .box ul li a{
   display: block;
   padding: 10px 25px;
  }
  .drag-dash {
   position: absolute;
   border: #000 sólido 1px;
   background: #ececec;
  }
  .dash {
   float: left;
   border: 1px sólido transparente;
  }
 </style>
</head>
<body>
<h1>div arrastar e ordenar horizontalmente</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" >Navegação Um</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navegação Dois</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navegação Navegação Três</a></li>
  <li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Navegação Navegação Quatro</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;
    //deslocamento relativo do elemento do mouse
    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 + });
    // Crie um novo elemento e insira-o na posição anterior ao elemento arrastado (quadro tracejado)
    $("<div class='dash'></div>").insertBefore(theDiv);
    tempDiv = $(".dash");
    $(".dash").css("width", theDivWidth);
    return false
   });
  });
  $(document).mouseup(function (event) {
   if (!choose) {
    return false;
   }
   if (!move) {
    //Recupere o estilo inicial do objeto
    theDiv.removeClass("drag-dash");
    theDiv.addClass("drag");
    tempDiv.remove(); // Exclua o div tracejado recém-criado
    choose = false;
    return false;
   }
   theDiv.insertBefore(tempDiv); // Insira o elemento arrastado no local do div tracejado
   //Recupere o estilo inicial do objeto
   theDiv.removeClass("drag-dash");
   theDiv.addClass("drag");
   tempDiv.remove(); // Exclua o div tracejado recém-criado
   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;
   // Arraste o elemento seguido do movimento do mouse
   theDiv.css({left: lastPos.x + , top: lastPos.y + });
   // Arraste o elemento seguido do movimento do mouse para encontrar o elemento de destino da inserção
   var $main = $('.drag'); // Variável local: Obter novamente as coordenadas de cada elemento de acordo com a ordem rearranjada
   $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); // Obter o primeiro elemento\
    tarFirstX = tarFirst.position().left + theDivHalf; // A coordenada vertical central do primeiro elemento
    //O objeto de arraste é movido para a primeira posição
    if (lastPos.x <= tarFirstX) {
     tempDiv.insertBefore(tarFirst);
    }
    //Depois de julgar a coordenada do elemento alvo a ser inserido, insira diretamente
    if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
     tempDiv.insertAfter(tarDiv);
    }
   });
   return false
  });
 });
</script>
</body>
</html>

Isso é tudo o que há no artigo, esperamos que o conteúdo deste artigo ajude a aprendizagem ou ao trabalho de todos, e esperamos que todos apoiem o tutorial de clamor!

Declaração: O conteúdo deste artigo é extraído da internet, pertence ao respectivo detentor dos direitos autorais, o conteúdo é contribuído e carregado voluntariamente pelos usuários da internet, este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de infringir direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, troque # por @ para denunciar, e forneça provas relevantes. Caso se confirme, o site deletará imediatamente o conteúdo suspeito de infringir direitos autorais.)

Manual básico