为了账号安全，请及时绑定邮箱和手机立即绑定

怎样用js对一个textarea中的文本实现拖拽呢？

首页 猿问 怎样用js对一个textarea中...

怎样用js对一个textarea中的文本实现拖拽呢？

JavaScript
牧羊人nacy 2019-04-14 11:28:56
举个例子，想要实现这种效果：里面有200个字，我用鼠标选中第20-36个字，然后把它拖放到第60字的位置。这个功能在notepad2.exe中早就实现了，而我希望在textarea中实现它。我这么写：document.addEventListener("dragover",function(e){e.stopPropagation();e.preventDefault();},false);Editor.addEventListener("dragover",function(e){e.stopPropagation();e.preventDefault();//该如何在鼠标拖动过程中定位文本插入点呢？},false);//Editor引用那个Editor.addEventListener("dragstart",function(e){console.log(e.type);varstartPos=Editor.selectionStart,endPos=Editor.selectionEnd;vartmpStr=Editor.value;varword=tmpStr.substring(startPos,endPos);//console.log(word);取得选中的文本},false);Editor.addEventListener("drop",function(e){e.stopPropagation();e.preventDefault();if(e.dataTransfer.types=='text/plain'){//现在问题在这里了，drop的时候无法取得鼠标放开时在文本中的位置（即插入点位置）。怎么办呢？}},false);如果这能实现，我还希望实现：按住Ctrl的情况下拖拽文本，实现复制文本到另一个位置的功能。
查看完整描述

2 回答

?
拉风的咖菲猫

TA贡献1995条经验 获得超2个赞

啊，我终于发现在自己写的在线编辑器中不能拖放文本的原因所在了：因为我对dragover事件和drop事件都用了e.stopPropagation();e.preventDefault();我至所以要这么做，是为了能够用拖放的方式上传文件。
但是这样一来，所有的dragover和drop事件都被e.stopPropagation();e.preventDefault();了。
现在我修改了一下，把它改成这样：
document.addEventListener("dragover",function(e){
e.stopPropagation();if(e.dataTransfer.types=="Files")e.preventDefault();
},false);
Editor.addEventListener("dragover",function(e){
e.stopPropagation();if(e.dataTransfer.types=="Files")e.preventDefault();
},false);//Editor引用那个

举报

0/150
提交
取消