验证中...
语言: HTML
分类: Web开发技术
最后更新于 2018-10-12 17:41
拖拽排序题
原始数据 复制代码
<template>
<div>
<section class="main">
<div class="drag-title">拖动排序</div>
<div class="drag-box-left">
<div class="drag-list" draggable="true"
v-for="list in data1"
:data-id="list.id"
@dragstart="dragstartEvent"
@dragend="dragendEvent"
@dragenter="dragenterEvent"
@dragleave="dragleaveEvent"
@dragover="dragoverEvent"
:key="list.id">
{{list.title}}
</div>
</div>
</section>
<div class="submit" @submit="orderSubject">提交</div>
</div>
</template>
<script>
/* eslint-disable */
export default {
data() {
return {
dragElement: null,
lock: true,
data1: [
{id: 1, title: '这里是列表1的标题'},
{id: 2, title: '这里是列表2的标题'},
{id: 3, title: '这里是列表3的标题'},
{id: 4, title: '这里是列表4的标题'},
{id: 5, title: '这里是列表5的标题'},
{id: 6, title: '这里是列表6的标题'},
{id: 7, title: '这里是列表7的标题'}
],
newData:[]
}
},
methods: {
dragstartEvent(ev) {
// console.log(ev)
const self = this;
self.dragElement = ev.target;
ev.target.style.backgroundColor = '#f8f8f8';
},
dragendEvent(ev) {
this.newData = []
console.log(ev.target.parentNode,'ev.target.parentNode')
let nodes = ev.target.parentNode.children
for(let i = 0; i<nodes.length;i++) {
this.newData.push(nodes[i].dataset.id)
}
// ev.target.parentNode.children.forEach(item => {
// this.newData.push(item.dataset.id);
// })
console.log(this.newData,'this.newData')
ev.target.style.backgroundColor = '#fff';
ev.preventDefault();
},
dragenterEvent(ev) {
const self = this;
if(self.dragElement != ev.target){
// ev.target.parentNode.insertBefore(ev.target,self.dragElement);
ev.target.parentNode.insertBefore(self.dragElement, ev.target);
}
},
dragleaveEvent(ev) {
const self = this;
// console.log(self.dragElement,'ev.target',ev.target)
if(self.dragElement != ev.target){
if(self.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
ev.target.parentNode.appendChild(self.dragElement);
self.lock = false;
}else{
self.lock = true;
}
}
},
dragoverEvent(ev) {
ev.preventDefault();
},
orderSubject() {
// 提交题目答案
}
}
}
</script>
<style >
.submit{
border-radius: 10px;
height: 90px;
text-align: center;
line-height: 90px;
width: 60%;
color:#fff;
font-size: 30px;
background-color: #20a0ff;
cursor: pointer;
}
.main{
overflow: hidden;
}
.drag-box-left{
float: left;
width: 45%;
}
.drag-box-right{
float: right;
width: 45%;
}
.drag-list{
border: 1px solid #ddd;
padding:10px;
margin-bottom: 20px;
transition: border .3s;
}
.drag-list:hover{
border: 1px solid #20a0ff;
}
.drag-title{
font-weight: 400;
line-height: 25px;
margin: 10px 0;
font-size: 22px;
color: #1f2f3d;
}
</style>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助