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

Question

举个例子，想要实现这种效果：<textarea>里面有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引用那个<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);

如果这能实现，我还希望实现：按住Ctrl的情况下拖拽文本，实现复制文本到另一个位置的功能。

Answer 1

啊，我终于发现在自己写的在线编辑器中不能拖放文本的原因所在了：因为我对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引用那个<textarea>
Editor.addEventListener("drop",function(e){
    if(e.dataTransfer.types!="Files")return true;
    e.stopPropagation();e.preventDefault();
    // 用HTML5 File API上传文件
},false);

这样依然能用拖放的方式上传文件，同时又用用拖放的方式修改文本内容了。棒极了。

Answer 2

https://ooo.0o0.ooo/2015/09/17/55fac3cb20762.gif
这样？浏览器支持的啊

怎么不支持动图。。。

Answer 3

这个功能貌似和系统有关吧？测试了一下。不用做任何处理都可以实现这个操作.我系统是window 8.1 64bit