vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容
html:
<div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item"
@dragstart="dragStart($event, item.labelName)"
draggable='true'
v-for="(item, index) in modelCommonList"
:key="index"
@click="dropRelease($event, item.labelName)">
{{item.labelName}}
</div>
<div contenteditable="true"
@drop="dropRelease($event)"
@dragover="allowDrop($event)"
ref="smsContent"
class="border-r4 f12 h100 pd-tb10 pd-lr10 overflow-scroll-y editable-div"
id="smsContent">
</div>
methods:
insertHtmlAtCaret(html) {
let sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
let el = document.createElement("div");
el.appendChild(html)
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
},
//開(kāi)始拖動(dòng)可選字段
dragStart(event, name) {
event = event || window.event;
this.dragging = name; //str
event.dataTransfer.setData(" ", " "); //for firefox
},
//阻止默認(rèn)事件
allowDrop(event) {
let e = event || window.event;
if (e && e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
},
//拖動(dòng)到指定位置并釋放
dropRelease(event, nodeValueName) {
event = event || window.event;
event.preventDefault();
let textNode = document.createElement('input');
textNode.className = 'mg-lr5 enabledTag';
textNode.type = 'button';
textNode.value = this.dragging || nodeValueName;
this.insertHtmlAtCaret(textNode);
this.dragging = '';
},
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放
最近在做大屏展示需要在一開(kāi)始播放引導(dǎo)視頻,產(chǎn)生自動(dòng)播放需求,下面這篇文章主要給大家介紹了關(guān)于Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放的相關(guān)資料,需要的朋友可以參考下2023-01-01
詳解Vue.js iview實(shí)現(xiàn)樹(shù)形權(quán)限表(可擴(kuò)展表)
這篇文章主要介紹了詳解Vue.js iview實(shí)現(xiàn)樹(shù)形權(quán)限表(可擴(kuò)展表),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)
這篇文章主要介紹了vue組件之間通信,結(jié)合實(shí)例形式分析了vue父子組件、兄弟組件之間通信的原理、實(shí)現(xiàn)方法,并給出了一個(gè)類(lèi)似點(diǎn)贊功能的總結(jié)實(shí)例,需要的朋友可以參考下2018-12-12
vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章,但基本都是本地?cái)r截請(qǐng)求返回?cái)?shù)據(jù),本文主要介紹了vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù),文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
Vue 2.5 Level E 發(fā)布了: 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中,我們將重點(diǎn)介紹一些更重要的的變化:更好的 TypeScript 集成,更好的錯(cuò)誤處理,更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無(wú)關(guān)的服務(wù)端渲染2017-10-10
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
今天小編就為大家分享一篇vue-cli 3.x 配置Axios(proxyTable)跨域代理方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

