所用知识点-vue官网钩子函数
vue部分
<template>
<div>
<div id="dragTest"
style="position: fixed;top: 13%;left: 70%;z-index: 2110;
width: 540px;background: #ffffff;box-shadow: 0 4px 8px 0 #eeeeee;
border-radius: 4px;left: 20%;top: 20%; width:200px;
" >
<div style="display: flex;
cursor: move;
justify-content: space-between;
height: 40px;
line-height: 40px;
padding: 0 20px;
color: #ffffff;
background: #59dacd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;">
<span v-drag:#dragTest v-drag="2">
<span >拖拽测试</span>
</span>
<i class="iconfont icon-wrong" ></i>
</div>
</div>
</div>
</template>
<script>
import drag from '../../../../directive/drag'
export default {
name: 'MarkingCorrecting',
directives: {
drag },
}
</script>
JS代码:
链接:https://pan.baidu.com/s/1-ILXYXbRSabtBO40imYlhQ?pwd=bjcx
提取码:bjcx
最终效果