Heim > Artikel > Web-Frontend > So verwenden Sie js, um die horizontale Drag-and-Drop-Navigationsleistenfunktion zu implementieren
So verwenden Sie js, um die horizontale Drag-and-Drop-Navigationsleistenfunktion zu implementieren
- 不言Original
- 2018-06-25 14:13:292020Durchsuche
In diesem Artikel wird hauptsächlich die Methode zur Implementierung der horizontalen Drag-and-Drop-Navigationsleistenfunktion in js vorgestellt. Es hat einen sehr guten Referenzwert, schauen wir es uns gemeinsam an
Der Effekt ist wie folgt:
Der Code lautet wie folgt:
<!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>
Das Obige ist der gesamte Inhalt dieses Artikels Hilfreich für das Lernen aller. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie js, um die horizontale Drag-and-Drop-Navigationsleistenfunktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analyse zur Verwendung der Zeitsteuerung von jquery UI DatepickerNächster Artikel：Analyse zur Verwendung der Zeitsteuerung von jquery UI Datepicker
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse