首页 > 怎样用js对一个textarea中的文本实现拖拽呢?

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

举个例子,想要实现这种效果:<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的情况下拖拽文本,实现复制文本到另一个位置的功能。


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

怎么不支持动图。。。


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


啊,我终于发现在自己写的在线编辑器中不能拖放文本的原因所在了:因为我对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);

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

【热门文章】
【热门文章】