vue項目中在可編輯div光標位置插入內容

html：

@dragstart="dragstart($event, item.labelname)"

draggable='true'

v-for="(item, index) in modelcommonlist"

:key="index"

@click="droprelease($event, item.labelname)">

{{item.labelname}}

@drop="droprelease($event)"

@dragover="allowdrop($event)"

ref="smscontent"

class="border-r4 f12 h100 pd-tb10 pd-lr10 overflow-scroll-y editable-div"

id="smscontent">

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);

}

},

//開始拖動可選字段

dragstart(event, name) {

event = event || window.event;

this.dragging = name; //str

event.datatransfer.setdata(" ", " "); //for firefox

},

//阻止默認事件

allowdrop(event) {

let e = event || window.event;

if (e && e.preventdefault) {

e.preventdefault();

} else {

window.event.returnvalue = false;

}

},

//拖動到指定位置并釋放

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 = '';

},

總結

以上所述是小編給大家介紹的vue項目中在可編輯div光標位置插入內容的實現代碼，希望對大家有所幫助

如您對本文有疑問或者有任何想說的，請點擊進行留言回復，萬千網友為您解惑！

總結

以上是生活随笔為你收集整理的vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。