上一篇文章使用sortablejs ,实在是实现不了我的需求,所以使用原生试一下,终于实现了
原生JS的drag事件
想要拖动,需要手动开启draggable="true"
左侧代码:
<div
v-for="(item, index) in classTableList"
:key="index"
class="level1"
:draggable="true"
@dragstart="dragStartFn(item, index)"
@dragenter="dragEnterFn($event, index)"
@dragover="dragoverFn($event, index)"
@drop="dropFn(item, index)"
>
<div class="firstCont">
<el-icon v-if="item.isUse === '0'" color="#F37B1D"> <Star /> </el-icon>
<el-icon v-if="item.isUse === '1'" color="#1E9FFF" :size="18" class="StarFilled"><StarFilled /> </el-icon
><span style="margin-left: 5px">{{ item.title }}</span>
<span style="color: #9a9a9a; margin-right: 20px">:{{ item.description }}</span>
<el-icon color="#9A9A9A" class="no-inherit" @click="deleteCourse(item.id)">
<Delete />
</el-icon>
</div>
</div>
// 拖动
const dragIndex = ref(0);
const enterIndex = ref(0);
const selectedRow = ref();
const draggable = ref(true);
// 该事件在用户开始拖动元素时触发
const dragStartFn = (item, index) => {
selectedRow.value = item;
dragIndex.value = index;
};
// ondragenter事件在拖动元素进入目标元素时触发,通常用于设置拖动时的样式。
const dragEnterFn = (e, index) => {
e.preventDefault();
enterIndex.value = index;
dragIndex.value = index;
};
// ondragover事件在拖动元素在目标元素上方时触发,通常用于防止默认的拖放行为。可以通//过event.preventDefault()方法阻止默认行为。
const dragoverFn = (e, index) => {
e.preventDefault();
};
//从外部拖拽放置到当前列表
const dropFn = (item, e, index) => {
//执行自己的操作
};
右侧table:结合上一篇文章中 2.使用原生table/div 构造
下边是可以实现拖拽的代码
<div id="courseName" class="sigle-col" style="width: 40%">
<div
v-for="(item, index) in tableData"
:key="item.id"
class="grid-content ep-bg-purple-light"
style="text-align: left"
:draggable="draggable"
@dragstart="dragStartFnTable(item, index)"
@dragenter="dragEnterFnTable(item, $event, index)"
@dragover="dragoverFnTable(item, $event, index)"
@dragend="dragEndFnTable(item, $event, index)"
@drop="dropFnTable(item, $event, index)"
>
<span style="margin-left: 10px">
<el-tooltip
:content="item.remark"
placement="top"
:disabled="item.remark !== '' ? false : true"
>
<el-icon
v-if="item.id !== ''"
:color="item.remark !== '' ? '#FF626D' : ''"
@click="addRemark(item)"
><Document /></el-icon
></el-tooltip>
<el-icon v-if="item.courseType === '0'"> <Star /> </el-icon
><el-icon v-if="item.courseType === '1'"><Aim /></el-icon
>{{ item.courseName }}</span
>
</div>
</div>
// Table表格中
// 该事件在用户开始拖动元素时触发
const startItem = ref();
const endItem = ref();
const startIndex = ref();
const endIndex = ref();
const dragStartFnTable = (item, index) => {
startItem.value = item;
startIndex.value = index;
};
// 该事件在拖动的元素进入放置目标时触发
const dragEnterFnTable = (item, e, index) => {
e.preventDefault();
enterIndex.value = index;
};
// 该事件在拖动元素在放置目标上时触发
const dragoverFnTable = (item, e, index) => {
e.preventDefault();
endItem.value = item;
endIndex.value = index;
if (endIndex.value === startIndex.value) {
draggable.value = false;
} //前后拖拽位置一样,不进行操作
};
// 表格内拖拽结束
const dragEndFnTable = (item, e, index) => {
e.preventDefault();
//执行自己的操作
draggable.value = true;
};
//从外部拖拽放置后的操作
const dropFnTable = (item, e, index) => {
e.preventDefault();
//执行自己的操作
selectedRow.value = {};
};
实现效果:
参考文档:https://blog.csdn.net/Hypocriteee/article/details/131754499