English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
以下为效果：
以下为代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>div horizontal drag and drop sorting</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: 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>div horizontal drag sorting</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">Navigation un</a></li>/a></li>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">Navigation deux navigation</a></li>/a></li>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">Navigation navigation navigation trois</a></li>/a></li>
<li class="drag"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">Navigation navigation quatre</a></li>/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;
//quantité de décalage relative de l'élément souris
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 + , top: initPos.y + );
// Créer un nouvel élément et insérer l'élément glissé avant la position (trait de soulignement)
$("<div class='dash'></div>").insertBefore(theDiv);
tempDiv = $(".dash");
$(".dash").css("width", theDivWidth);
return false
});
});
$(document).mouseup(function (event) {
if (!choose) {
return false;
}
if (!move) {
//Restaurer le style initial de l'objet
theDiv.removeClass("drag-dash");
theDiv.addClass("drag");
tempDiv.remove(); // Supprimer le div de trait de soulignement créé
choose = false;
return false;
}
theDiv.insertBefore(tempDiv); // Insérer l'élément glissé à la position du div de trait de soulignement
//Restaurer le style initial de l'objet
theDiv.removeClass("drag-dash");
theDiv.addClass("drag");
tempDiv.remove(); // Supprimer le div de trait de soulignement créé
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;
// Déplacer l'élément glissé avec la souris
theDiv.css({left: lastPos.x + , top: lastPos.y + );
// Déplacer l'élément glissé avec la souris pour trouver l'élément cible d'insertion
var $main = $('.drag'); // Local variables: Get the coordinates of each element again in the order of rearrangement
$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); // Get the first element\
tarFirstX = tarFirst.position().left + theDivHalf; // The vertical coordinate of the center of the first element object
//Drag the object to the first position
if (lastPos.x <= tarFirstX) {
tempDiv.insertBefore(tarFirst);
}
//After determining the coordinates of the target element to be inserted, insert it directly
if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
tempDiv.insertAfter(tarDiv);
}
});
return false
});
});
</script>
</body>
</html>
That's all for this article. I hope the content of this article can bring some help to everyone's learning or work, and I also hope to support the Yelling Tutorial more!
Statement: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @ to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)