我欲封天,穿越小说完本,古风名字

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

js如何實(shí)現(xiàn)橫向拖拽導(dǎo)航條功能-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)js如何實(shí)現(xiàn)橫向拖拽導(dǎo)航條功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的陵水黎族網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

效果如下：

js如何實(shí)現(xiàn)橫向拖拽導(dǎo)航條功能

代碼如下：




 
 div橫向拖拽排序
  
 
  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;
  }
 


div橫向拖拽排序

 
  導(dǎo)航一
  導(dǎo)航二導(dǎo)航
  導(dǎo)航導(dǎo)航導(dǎo)航三
  導(dǎo)航導(dǎo)航四
  導(dǎo)五

$(document).ready(function () { var range = {x: 0, y: 0};//鼠標(biāo)元素偏移量 var lastPos = {x: 0, y: 0, x1: 0, y1: 0}; //拖拽對(duì)象的四個(gè)坐標(biāo) var tarPos = {x: 0, y: 0, x1: 0, y1: 0}; //目標(biāo)元素對(duì)象的坐標(biāo)初始化 var theDiv = null, move = false; var choose = false; //拖拽對(duì)象拖拽狀態(tài) 選中狀態(tài) var theDivId = 0, theDivHeight = 0, theDivHalf = 0; var tarFirstY = 0; //拖拽對(duì)象的索引、高度、的初始化。 var tarDiv = null, tarFirst, tempDiv; //要插入的目標(biāo)元素的對(duì)象, 臨時(shí)的虛線對(duì)象 var initPos = {x: 0, y: 0}; var theDivWidth;//拖拽對(duì)象的寬度 $(".drag").each(function () { $(this).mousedown(function (event) { choose = true; //拖拽對(duì)象 theDiv = $(this); //記錄拖拽元素初始位置 initPos.x = theDiv.position().left; initPos.y = theDiv.position().top; //鼠標(biāo)元素相對(duì)偏移量 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'}); // 創(chuàng)建新元素插入拖拽元素之前的位置(虛線框) $("

").insertBefore(theDiv); tempDiv = $(".dash"); $(".dash").css("width" , theDivWidth); return false }); }); $(document).mouseup(function (event) { if (!choose) { return false; } if (!move) { //恢復(fù)對(duì)象的初始樣式 theDiv.removeClass("drag-dash"); theDiv.addClass("drag"); tempDiv.remove(); // 刪除新建的虛線div choose = false; return false; } theDiv.insertBefore(tempDiv); // 拖拽元素插入到虛線div的位置上 //恢復(fù)對(duì)象的初始樣式 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; // 拖拽元素隨鼠標(biāo)移動(dòng) theDiv.css({left: lastPos.x + 'px', top: lastPos.y + 'px'}); // 拖拽元素隨鼠標(biāo)移動(dòng) 查找插入目標(biāo)元素 var $main = $('.drag'); // 局部變量：按照重新排列過(guò)的順序再次獲取各個(gè)元素的坐標(biāo)， $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); // 獲得第一個(gè)元素\ tarFirstX = tarFirst.position().left + theDivHalf; // 第一個(gè)元素對(duì)象的中心縱坐標(biāo) //拖拽對(duì)象移動(dòng)到第一個(gè)位置 if (lastPos.x <= tarFirstX) { tempDiv.insertBefore(tarFirst); } //判斷要插入目標(biāo)元素的坐標(biāo)后，直接插入 if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) { tempDiv.insertAfter(tarDiv); } }); return false }); });

感謝各位的閱讀！關(guān)于“js如何實(shí)現(xiàn)橫向拖拽導(dǎo)航條功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站標(biāo)題：js如何實(shí)現(xiàn)橫向拖拽導(dǎo)航條功能-創(chuàng)新互聯(lián)
文章鏈接：http://fisionsoft.com.cn/article/cshijd.html

新聞中心

div橫向拖拽排序

其他資訊