Table of contents
2 Handwritten Simple Label Demo
0 written in front of
Criticize the following article first
(10 messages) sortable.js realizes drag-and-drop_sortablejs_huadang's blog-CSDN blog
(10 messages) sortablejs drag and drop sorting function (vue)_C_fashionCat's Blog-CSDN Blog
Everything they write is unverified! ! ! With your attitude, please don't post blogs casually! !
Into the title
1 Dependency installation
Environment description: Vue2 environment
Installation command: npm install sortablejs
2 Handwritten Simple Label Demo
<table class="mysort">
<tr class="thClass"><th>id</th><th >标题</th></tr>
<tr class="myItem" v-for="item in tableData" :key="item.articleId">
<td class="myId">{
{item.articleId}}</td>
<td class="myTitle">{
{item.articleTitle}}</td>
</tr>
</table>
---------------
data(){
return{
tableData: [
{
"articleId": 1314,
"articleTitle": "想玩转Java，那这篇内容不能错过"
},
{
"articleId": 1339,
"articleTitle": "HTML、CSS、JavaScript、PHP、 MySQL 的学习顺序是什么？"
},
{
"articleId": 1316,
"articleTitle": "就业岗位只增不减！Java语言还能火多久？"
},
{
"articleId": 1337,
"articleTitle": "人类能实现大脑编程吗？"
},
{
"articleId": 1333,
"articleTitle": "万字泣血解析割韭菜内幕，程序员别老想着做副业"
},
{
"articleId": 1338,
"articleTitle": "MySQL 中删除的数据流落何方?"
},
{
"articleId": 1315,
"articleTitle": "量子力学？量子计算机？秒杀传统计算机的能力从何而来？"
},
{
"articleId": 1331,
"articleTitle": "计算机网络安全问题和日常防范措施"
},
{
"articleId": 1334,
"articleTitle": "99%的Java程序员会踩的6个坑"
},
{
"articleId": 1335,
"articleTitle": "用vue构建用户界面有哪些好处？"
},
{
"articleId": 1336,
"articleTitle": "这 11 种编程语言，还“活着”吗？"
},
{
"articleId": 1346,
"articleTitle": "12年的祖传“屎山”代码，年收入竟超1.4亿元？"
},
{
"articleId": 1348,
"articleTitle": "前端教程：开发流程中项目需求分析怎么做？"
},
{
"articleId": 1350,
"articleTitle": "大白话带你认识 JVM11"
},
{
"articleId": 1353,
"articleTitle": "sdcsd"
},
{
"articleId": 1354,
"articleTitle": "df"
}
],
sortData: [] // 拖拽数据
}},
-------------------
methods:{
// 排序信息提交
submitSort(){
let ArrSortId=this.sortData.map((da)=>{
return da.articleId;
})
console.log(ArrSortId)
// 发送排序文章id向后端
},
// 拖拽
rowDrop() {
const tbody = document.querySelector(".mysort");
Sortable.create(tbody, {
animation: 300,
delay: 10,
// 如果有不想排序的，在这里按照class匹配的方式写出即可
filter:".thClass",
// 需要拖拽的标签的class，强烈推荐写
draggable:".myItem",
onEnd:({ newIndex, oldIndex })=>{
let sortData = this.sortData;
let temp=sortData[oldIndex-1]
sortData.splice(oldIndex-1,1)
sortData.splice(newIndex-1,-1,temp)
this.sortData=sortData;
}
});
},
}
css
------------
.mysort{
background-color: #fecfef;
margin: 3px auto;
font-size: 20px;
user-select: none;
}
.thClass{
background-color: #defaea;
color: #000;
}
.myId{
width: 200px;
background-color: #667eea;
color: #000;
}
.myTitle{
width: 800px;
background-color: #fbc2eb;
color: #0c2a70;
}
.myItem :hover{
background-color: #fddb92;
font-size: 22px;
}
.myBut{
position: fixed;
top: 49%;
right: 3%;
}
3 points
One is that it is not recommended to directly modify the original array. It is recommended to copy it first and modify the copied data. If you directly modify the original number, you will encounter many pitfalls.
The second is to pay attention to those parameters. Animation is the duration of the animation, and delay is the delay of the animation. These are not important, but the following two are important. The meaning of the Filter filter, the parameter followed by the Filter is the name of the class, If you want a certain class not to be dragged, you can add it after the filter, pay attention to add a small dot. In the same way, draggable is followed by the class that needs to be dragged. Remember to mark all the tags we need to drag with class.
The third is that we must write onEnd in the form of arrow brackets, because writing in this way will not be controlled by vm, what we need to do is not to be controlled by him.
Fourth, we need to pay attention to the hierarchical relationship. When we get elements, we must fill in the class of all parent tags that need to be dragged.
4 effects
After the backend accepts it, change the database to
