draggable vue拖入模板消息到input

//输入框

<el-input v-model="formInfo.appPreNoticeTitle" id="appPreNoticeTitle" :placeholder="t('system.queuing.40NoticeTitleTips')" clearable class="!w-600px mb-3" @dragover="(e) => e.preventDefault()" @drop="dragEnter($event)" @blur="blurEvent" />

//可以拖动的文本

<div class="content"> <template v-for="(menu, index) in menuList" :key="index"> <div class="left-item-wrap"> <h4 class="item-title">{{ menu.itemName }}</h4> <div v-for="item in menu.items" :key="item.itemName" effect="plain" draggable="true" @dragstart="dragstart(item)" class="menuitem" > {{ item.itemName }} </div> </div> </template>

//js // 拖动模板消息

const currentDragText = ref('') const blurIndex = ref('') const dragstart = (item) => { currentDragText.value = {{${item.itemCode}}} } const dragEnter = (e) => { let id = e.srcElement.id let str = formInfo.value[id] || '' let index = blurIndex.value formInfo.value[id] = str.slice(0, index) + currentDragText.value + str.slice(index) }

// 获取光标所在位置的index

const blurEvent = (e) => { blurIndex.value = e.srcElement.selectionStart }