Maison > Article > interface Web > Comment utiliser js pour implémenter la fonction de barre de navigation glisser-déposer horizontale
Comment utiliser js pour implémenter la fonction de barre de navigation glisser-déposer horizontale
- 不言original
- 2018-06-25 14:13:291962parcourir
Cet article présente principalement la méthode d'implémentation de la fonction de barre de navigation glisser-déposer horizontal dans js. Il a une très bonne valeur de référence, regardons-le ensemble
L'effet est le suivant :
Le code est le suivant :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>p横向拖拽排序</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
body, p {
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;
}
</style>
</head>
<body>
<h1>p横向拖拽排序</h1>
<p 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>
</p>
<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 thep = null, move = false;
var choose = false; //拖拽对象 拖拽状态 选中状态
var thepId = 0, thepHeight = 0, thepHalf = 0;
var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
var tarp = null, tarFirst, tempp; //要插入的目标元素的对象, 临时的虚线对象
var initPos = {x: 0, y: 0};
var thepWidth;//拖拽对象的宽度
$(".drag").each(function () {
$(this).mousedown(function (event) {
choose = true;
//拖拽对象
thep = $(this);
//记录拖拽元素初始位置
initPos.x = thep.position().left;
initPos.y = thep.position().top;
//鼠标元素相对偏移量
range.x = event.pageX - thep.position().left;
range.y = event.pageY - thep.position().top;
thepId = thep.index();
thepWidth = thep.width();
thepHalf = thepWidth / 2;
thep.removeClass("drag");
thep.addClass("drag-dash");
thep.css({left: initPos.x + 'px', top: initPos.y + 'px'});
// 创建新元素 插入拖拽元素之前的位置(虚线框)
$("<p class='dash'></p>").insertBefore(thep);
tempp = $(".dash");
$(".dash").css("width" , thepWidth);
return false
});
});
$(document).mouseup(function (event) {
if (!choose) {
return false;
}
if (!move) {
//恢复对象的初始样式
thep.removeClass("drag-dash");
thep.addClass("drag");
tempp.remove(); // 删除新建的虚线p
choose = false;
return false;
}
thep.insertBefore(tempp); // 拖拽元素插入到 虚线p的位置上
//恢复对象的初始样式
thep.removeClass("drag-dash");
thep.addClass("drag");
tempp.remove(); // 删除新建的虚线p
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 + thepWidth;
// 拖拽元素随鼠标移动
thep.css({left: lastPos.x + 'px', top: lastPos.y + 'px'});
// 拖拽元素随鼠标移动 查找插入目标元素
var $main = $('.drag'); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
$main.each(function () {
tarp = $(this);
tarPos.x = tarp.position().left;
tarPos.y = tarp.position().top;
tarPos.x1 = tarPos.x + tarp.width() / 2;
tarFirst = $main.eq(0); // 获得第一个元素\
tarFirstX = tarFirst.position().left + thepHalf; // 第一个元素对象的中心纵坐标
//拖拽对象 移动到第一个位置
if (lastPos.x <= tarFirstX) {
tempp.insertBefore(tarFirst);
}
//判断要插入目标元素的 坐标后， 直接插入
if (lastPos.x >= tarPos.x - thepHalf && lastPos.x1 >= tarPos.x1) {
tempp.insertAfter(tarp);
}
});
return false
});
});
</script>
</body>
</html>
Ce qui précède est l'intégralité du contenu de cet article, je l'espère. sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez visiter le site Web Follow PHP Chinese !
Recommandations associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn