vue项目中在可编辑div光标位置插入内容的实现代码
作者:leo_neverGivpUp 时间:2024-05-28 15:55:45
vue项目中在可编辑div光标位置插入内容
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);
}
},
//开始拖动可选字段
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光标位置插入内容的实现代码网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://blog.csdn.net/weixin_43915587/article/details/95994680
标签:vue,div光标,插入
0
投稿
猜你喜欢
详解uniapp页面跳转URL传参大坑
2023-09-15 09:52:43
Sql Server安装出错,安装程序配置服务器失败的解决方法小结
2024-01-22 19:10:19
Python基础之条件控制操作示例【if语句】
2021-02-09 09:30:02
Vue从TodoList中学父子组件通信
2024-05-29 22:22:20
jquery ajax 局部刷新小案例
2024-05-02 17:05:01
pycharm console 打印中文为乱码问题及解决
2023-06-15 22:30:02
echarts柱状堆叠图实现示例(图例和x轴都是动态的)
2024-04-29 13:21:03
Django如何与Ajax交互
2023-05-09 12:53:11
django实现图片上传数据库并显示
2024-01-13 08:52:24
Python编写带选项的命令行程序方法
2023-11-18 20:47:35
卷积神经网络经典模型及其改进点学习汇总
2023-07-22 22:15:19
在Mac OS上安装Go语言编译器的方法
2024-05-22 17:48:40
对于任意的XML的遍历
2008-09-05 17:11:00
Vue.2.0.5过渡效果使用技巧
2024-04-10 10:33:12
PHP实现从上往下打印二叉树的方法
2023-06-25 17:40:08
Python环境搭建过程从安装到Hello World
2023-03-03 07:41:36
mysql中limit的用法深入分析
2024-01-21 17:28:17
Oracle对两个数据表交集的查询
2010-07-26 12:51:00
各个版本IE合集下载,共存无冲突
2007-11-29 13:12:00
Python3进制之间的转换代码实例
2022-06-13 05:22:35