javascript - 怎样用js对一个textarea中的文本实现拖拽呢？-PHP中文网问答

举个例子，想要实现这种效果：</code>里面有200个字，我用鼠标选中第20-36个字，然后把它拖放到第60字的位置。</p> <p>这个功能在notepad2.exe中早就实现了，而我希望在textarea中实现它。</p> <p>我这么写：</p> <pre class='brush:php;toolbar:false;'><code>document.addEventListener("dragover", function(e) { e.stopPropagation();e.preventDefault(); }, false); Editor.addEventListener("dragover", function(e){ e.stopPropagation();e.preventDefault(); // 该如何在鼠标拖动过程中定位文本插入点呢？ }, false); // Editor引用那个<textarea> Editor.addEventListener("dragstart",function(e){ console.log(e.type); var startPos=Editor.selectionStart,endPos=Editor.selectionEnd; var tmpStr = Editor.value; var word=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);</code></pre> <p>如果这能实现，我还希望实现：按住Ctrl的情况下拖拽文本，实现复制文本到另一个位置的功能。</p> </div> <div class="share flexRow"> <div class="shareReply flexColumn shareDiv"> <a href="javascript:;"><img class="sharerImg" src="/static/images/images/icon50.png" data-id="1"></a> <span class="sharerSpan">3</span> </div> <div class="shareLike flexColumn shareDiv" onclick="ask_comment_good(23259)"> <a href="javascript:;" > <img class="sharerImg" src="/static/images/images/icon52.png" data-id="2"> </a> <span class="sharerSpan">0</span> </div> <div class="shareLDz flexColumn shareDiv dzdiv dzdiv1 aiaskgoodICollection" data-id=""> <a href="javascript:;" > <img class="sharerImg " src="/static/images/images/icon37.png" data-id="5"> </a> <span class="sharerSpan">0</span> </div> </div> <script> $('.jbtitleimg').on('click',function(){ $("#layuitc").hide() var layer = layui.layer; layer.closeAll(); }) $('.jbbtn').on('click',function(){ $("#layuitc").hide() var layer = layui.layer; layer.closeAll(); }) $('.sharerImg').mouseenter(function(e){ var dataId = e.currentTarget.dataset.id if(dataId == 1){ // $('.shareReply').find('img').attr('src','/static/images/images/icon51.png') }else if(dataId == 2){ // $('.shareLike').find('img').attr('src','/static/images/images/icon53.png') }else if(dataId == 4){ $('.shareShare').find('img').attr('src','/static/images/images/icon55.png') }else{ } }) $('.sharerImg').mouseleave(function(e){ var dataId = e.currentTarget.dataset.id if(dataId == 1){ // $('.shareReply').find('img').attr('src','/static/images/images/icon50.png') }else if(dataId == 2){ // $('.shareLike').find('img').attr('src','/static/images/images/icon52.png') }else if(dataId == 4){ $('.shareShare').find('img').attr('src','/static/images/images/icon54.png') } }) </script>             <div id="commentinput" class="info detail-comment-input layui-hide-sm"> <div class="detail-ci-avator"> <img src="https://img.php.cn/upload/avatar/000/000/002/61caddcba0718324.png" alt="PHP中文网"/> <div class="detail-r"> <span class="detail-name">PHP中文网</span> <p class="detail-signal">认证0级讲师</p> </div> </div> <div id="js-reply-wrap"> <div id="js-reply-editor-box" class="wd-comment-box js-ci-inner edui-imooc"></div> <div class="qa-ci-footer"> <div class="qa-ci-footright"> <button id="js-wenda-ci-submit" class="detail-btn" data-qid="23259">回答</button> </div> </div> </div> </div> <div id="pinglundeplace" class="allReply ask-reply-all-list comments-content"> <div class="arTop flexRow"> <div class="artLeft flexRow fontBold fontColor1">全部回复<b class="artlb colorGrey">(3)</b></div> <button class="artBtn ask-comment-answer">我来回复</button> </div> <div class="allReplayLine"></div> <div class="wdsyConDiv flexRow ask_top_ul"> <img src="https://img.php.cn/upload/avatar/000/001/120/5f2a5b6053764987.jpg" alt="天蓬老师" class="wdcdImg"> <div class="wdcdContent flexColumn"> <div class="wdcdContentReply"> <div class="wdxqrcTop flexRow"> <a href="/member/1120.html" target="_blank" class="wdcdcName">天蓬老师<b class="wdxqRcT colorGrey">2017-04-10 15:52:49</b></a> <span class="wdxqrcTopspan colorGrey">3楼</span> </div> <div class="wdcdcCons"><p>啊，我终于发现在自己写的在线编辑器中不能拖放文本的原因所在了：因为我对dragover事件和drop事件都用了e.stopPropagation();e.preventDefault();我至所以要这么做，是为了能够用拖放的方式上传文件。</p> <p>但是这样一来，所有的dragover和drop事件都被e.stopPropagation();e.preventDefault();了。</p> <p>现在我修改了一下，把它改成这样：</p> <pre class='brush:php;toolbar:false;'><code>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引用那个<textarea> Editor.addEventListener("drop",function(e){ if(e.dataTransfer.types!="Files")return true; e.stopPropagation();e.preventDefault(); // 用HTML5 File API上传文件 },false);</code></pre> <p>这样依然能用拖放的方式上传文件，同时又用用拖放的方式修改文本内容了。棒极了。</p></div> <div class="wdcdcInfo flexRow"> <a href="javascript:ask_reply_good(29919)"> <img class="wdxqindz" src="/static/images/images/icon27.png"></a> <span class="wdxqindzspan">赞 <b>+0</b></span> <div class="wdcdcileft"> <a href="javascript:;" class="wdcdciSpan reply">添加回复</a> </div> </div> <div class="wdcdContentReplyss" style="display: none;"> <div class="reply textarea-con"> <div class="replyTop flexRow"> <div class="retLeft flexRow"> <img src="https://img.php.cn/upload/avatar/000/000/002/61caddcba0718324.png" class="retlAvatar" > <span class="retlName">PHP中文网</span> </div>  </div> <textarea class="replaytext colorGrey" id="release-reply" placeholder="写下你的回复">