举个例子，想要实现这种效果：里面有200个字，我用鼠标选中第20-36个字，然后把它拖放到第60字的位置。<pre>这个功能在notepad2.exe中早就实现了，而我希望在textarea中实现它。<pre>我这么写：<pre>document.addEventListener("dragover",function(e){<pre>e.stopPropagation();e.preventDefault();<pre>},false);<pre>Editor.addEventListener("dragover",function(e){<pre>e.stopPropagation();e.preventDefault();<pre>//该如何在鼠标拖动过程中定位文本插入点呢？<pre>},false);//Editor引用那个<textarea><pre>Editor.addEventListener("dragstart",function(e){<pre>console.log(e.type);<pre>varstartPos=Editor.selectionStart,endPos=Editor.selectionEnd;<pre>vartmpStr=Editor.value;<pre>varword=tmpStr.substring(startPos,endPos);<pre>//console.log(word);取得选中的文本<pre>},false);<pre>Editor.addEventListener("drop",function(e){<pre>e.stopPropagation();e.preventDefault();<pre>if(e.dataTransfer.types=='text/plain'){<pre>//现在问题在这里了，drop的时候无法取得鼠标放开时在文本中的位置（即插入点位置）。怎么办呢？<pre>}<pre>},false);<pre>如果这能实现，我还希望实现：按住Ctrl的情况下拖拽文本，实现复制文本到另一个位置的功能。<pre><pre><pre></div> <div class="info clearfix"> <div class="l"><img src="//img1.sycdn.imooc.com/54586870000183e302200220-100-100.jpg">牧羊人nacy</div> <div class="r"><span>浏览 465</span><span>回答 2</span></div> </div> <!--广告位--> </section> <div id="wap_wenda_detail" style="overflow:hidden;line-height:0;margin-bottom:.2rem; max-height:4.26666667rem"> </div> <section> <input type="hidden" id="searchRecommandInput" data-problems="js实现手机屏幕的组件拖拽,echarts 3.0 实现拖拽重计算,js如何实现鼠标拖拽旋转功能,vuedraggable中如何设置部分元素不可拖拽？"> <h5>2回答</h5> <dl class="answer-list js-answer-list"> <dd id="511547"> <img src="//img1.sycdn.imooc.com/545863b500014e4602200220-100-100.jpg" class="avator"> <p class="name">拉风的咖菲猫</p> <div class="content">啊，我终于发现在自己写的在线编辑器中不能拖放文本的原因所在了：因为我对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引用那个Editor.addEventListener("drop",function(e){if(e.dataTransfer.types!="Files")returntrue;e.stopPropagation();e.preventDefault();//用HTML5FileAPI上传文件},false);这样依然能用拖放的方式上传文件，同时又用用拖放的方式修改文本内容了。棒极了。</div> <div class="action clearfix"> <div class="l"> <a href="javascript:void(0);" data-flag="support" class="like js-is-support js-support "><i class="imwap-thumb_up"></i><span class="js-support-num">0</span></a> <a href="javascript:void(0);" data-flag="unsupport" class="like js-is-support js-unsupport "><i class="imwap-thumb_down"></i><span class="js-support-num">0</span></a> </div> <div class="r"><a href="/account/login">0<i class="imwap-comment"></i></a></div> </div> </dd> </dl> </section> <div class="wenda-more-wrap hide js-wenda-more"> <i class="imwap-zhankai js-more-wenda"></i> <span class="appload-open js-appload-open">打开App，查看更多内容</span> </div> </div> <div class="app-box shadow"> <img class="logo" src="/static/wap/static/common/img/logo-small@2x.png" />随时随地看视频<a id="js-appload" href="javascript:void(0);" class="r js-appload-open"">慕课网APP</a> </div> <div class="relate-box"> <p class="tit">相关分类</p> <dl class="ques-list"> <dt class="clearfix"> <a href="/wenda/17" target="_blank"> <img class="left-img" src="//img1.sycdn.imooc.com/59e96f340001faac02400240.jpg"> JavaScript </a> </dt> </dl> </div> </div> <!-- 唤醒app弹窗 --> <div class="app-box-black" style="display:none"> <div class="app-box-modal"> <div class="app-box-title">继续浏览精彩内容</div> <div class="app-box-mkw"> <div class="app-mkw-logo"></div> <div class="logo-title">慕课网APP</div> <div class="logo-desc">程序员的梦工厂</div> <div class="app-alive-btn js-zhuge-appload js-appload-open" id="js-appload-footer">打开</div> </div> <div class="app-box-webserve"> <img src='' class="webserve-logo"> <div class="webserve-name"></div> <div class="webserve-btn js-go-on">继续</div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> var isLogin = false; var wendaID = 538988; window.onload = function() { zhuge.track('ContentPage', { 'Category': '猿问', 'Name': '怎样用js对一个textarea中的文本实现拖拽呢？', 'CID': wendaID, 'Price': 0 }); } </script> <script type="text/javascript"> var shareData = { title: "怎样用js对一个textarea中的文本实现拖拽呢？", desc: "<pre><pre>举个例子，想要实现这种效果：<textarea>里面有200个字，我用鼠标选中第20-36个字，然后把它拖放到第60字的位置。<pre>这个功能在notepad2.exe中早就实现了，而我希望在textarea中实现它。<pre>我这么写：<pre>document.addEventListener("dragover",function(e){<pre>e.stopPropagation();e.preventDefault();<pre>},false);<pre>Editor.addEventListener("dragover",function(e){<pre>e.stopPropagation();e.preventDefault();<pre>//该如何在鼠标拖动过程中定位文本插入点呢？<pre>},false);//Editor引用那个<textarea><pre>Editor.addEventListener("dragstart",function(e){<pre>console.log(e.type);<pre>varstartPos=Editor.selectionStart,endPos=Editor.selectionEnd;<pre>vartmpStr=Editor.value;<pre>varword=tmpStr.substring(startPos,endPos);<pre>//console.log(word);取得选中的文本<pre>},false);<pre>Editor.addEventListener("drop",function(e){<pre>e.stopPropagation();e.preventDefault();<pre>if(e.dataTransfer.types=='text/plain'){<pre>//现在问题在这里了，drop的时候无法取得鼠标放开时在文本中的位置（即插入点位置）。怎么办呢？<pre>}<pre>},false);<pre>如果这能实现，我还希望实现：按住Ctrl的情况下拖拽文本，实现复制文本到另一个位置的功能。<pre><pre><pre>", imgUrl: 'https://moco.imooc.com/static/base/images/logo-share.png', otherImgUrl: '', text: '我正在参加@慕课网的课程，很不错哦！快来一起学习吧！', // url: 'https://www.imooc.com' + window.location.pathname + window.location.search url: window.location.href, link: window.location.href } </script> <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!-- 微信分享 --> <script type="text/javascript"> wx.config({ debug: false, appId: 'wxe02b60dcb9fbd01f', timestamp: '1736329743', nonceStr: '(@*IMOOC+==+AK47%#)', signature: 'a85053e6a6c2195be84d9bf89d01ab82ddafc3cc', jsApiList: 'onMenuShareTimeline,onMenuShareAppMessage,onMenuShareQQ,onMenuShareWeibo'.split(',') }); wx.ready(function() { wx.onMenuShareTimeline(shareData); wx.onMenuShareAppMessage(shareData); wx.onMenuShareQQ(shareData); wx.onMenuShareWeibo(shareData); }); </script> <div style="display:none;"> <!-- 百度统计 --> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?c92536284537e1806a07ef3e6873f2b3"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> <script type="text/javascript" src="/static/wap/static/lib/zhugeio/init_455ad6a.js"></script><script type="text/javascript" src="/static/wap/static/common/js/jquery-2.1.0.min_ac9f840.js"></script><script type="text/javascript" src="/static/wap/static/common/js/common_be54bdc.js"></script><script type="text/javascript" src="/static/wap/static/lib/pretty/prettify_cedfcfe.js"></script><script type="text/javascript" src="/static/wap/static/common/js/msg_bed8d10.js"></script><script type="text/javascript" src="/static/wap/static/js/wenda/detail_2708af8.js"></script><script type="text/javascript" src="/static/wap/static/js/course/advertisementReport_6e58a98.js"></script></body> </html>