如何实现拖拽DOM后内容依然按顺序排列？
0
悬赏园豆：10
[已关闭问题]
关闭于 2019-10-15 14:32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素拖拽</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container {
position: relative;
top: 200px;
left: 200px;
width: 900px;
line-height: 200px;
background: green;
}
.container div {
display: inline-block;
width: 150px;
margin-left: 20px;
line-height: 100px;
text-align: center;
background: yellow;
}
</style>
</head>
<body>
<div id="container" class="container">
<div id="box1" class="box" data-id='1' data-index="1" draggable="true">1</div>
<div id="box2" class="box" data-id='2' data-index="2" draggable="true">2</div>
<div id="box3" class="box" data-id='3' data-index="3" draggable="true">3</div>
<div id="box4" class="box" data-id='4' data-index="4" draggable="true">4</div>
<div id="box5" class="box" data-id='5' data-index="5" draggable="true">5</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript">
var source = null,
dataIndex,
dataID,
text;
//循环每一个元素
$('.box').each(function(index, ele) {
//被拖拽元素进入目标元素阻止元素默认事件
$(ele).on('dragover', function(e) {
e.preventDefault();
})
//被拖拽元素开始移动
$(ele).on('dragstart', function(e) {
//获取当前被拖拽元素
source = $(this);
//获取当前被拖拽元素的data-index
dataIndex = $(this).attr('data-index')
text = $(this).text()
dataId = $(this).attr('data-id')
})
//目标元素已接受被拖拽元素
$(ele).on('drop', function(e) {
e.preventDefault();
//判断被拖拽元素的data-index是否小于、等于或者大于目标元素的data-index
if(dataIndex < $(this).attr('data-index')) {
//如果小于向后移动
moveDown(source, $(this))
} else if(dataIndex === $(this).attr('data-index')) {
//如果等于不执行操作
return
} else {
//如果大于向前移动
moveUp(source, $(this));
}
//目标元素的内容更改为被拖拽元素内容
// $(this).text(text)
$(this).attr('data-id',dataId)
})
});
//向后移动元素
function moveDown(se, ce) {
//获取被拖拽元素的上一个元素内容
// var t = $(se).next().text();
//获取被拖拽元素的上一个元素data-id
var d = $(se).next().attr('data-id');
//把当前拖拽的元素内容更换成它的上一个元素
// $(se).text(t);
//把当前拖拽的元素data-id更换成它的下一个元素data-id
$(se).attr('data-id',d)
//把当前拖拽元素替换为它的下一个元素
se = $(se).next();
//判断当前拖拽元素的title是否和目标元素title相等
if($(se).attr('data-index') === $(ce).attr('data-index')) {
//如果当前拖拽元素等于目标元素,不作任何操作
return false;
} else {
//如果不相等,递归,继续向后添加元素,把拖拽对象放到目标对象后面,(直到拖拽对象等于目标对象为止)
//console.info(se,ce)
moveDown(se, ce);
}
}
//向前移动元素
function moveUp(se, ce) {
//获取被拖拽元素的上一个元素内容
// var t = $(se).prev().text();
//获取被拖拽元素的上一个元素data-id
var d = $(se).prev().attr('data-id');
//把当前拖拽的元素内容更换成它的上一个元素
// $(se).text(t);
//把当前拖拽的元素data-id更换成它的下一个元素data-id
$(se).attr('data-id',d)
//把当前拖拽元素替换为它的下一个元素
se = $(se).prev();
//判断当前拖拽元素的title是否和目标元素title相等
if($(se).attr('data-index') === $(ce).attr('data-index')) {
//如果当前拖拽元素等于目标元素,不作任何操作
return false;
} else {
//如果不相等,递归,继续向后添加元素,把拖拽对象放到目标对象后面,(直到拖拽对象等于目标对象为止)
//console.info(se,ce)
moveUp(se, ce);
}
}
</script>
</body></html>
这是我自己写的，只实现了更换data-id属性， 如果才能实现更换整个DOM，并且DOM里的内容是1,2,3,4,5这样排列呢？求大佬指教。。。
下次提问记得创建一个 codepen : https://codepen.io/anon/pen/xobzGX
– 不如隐茶去 5年前