当前位置： 文江博客话题详情

Dragstart 和 textarea：如何捕获用户开始拖动某些选定的文本？

发布于 2024-10-09 14:55:25 字数 4882 浏览 2 评论 0原文

我需要一种方法来检测从 textarea 开始的文本拖动，以便能够在某些条件下替换 event.dataTransfer 内容。

显而易见的解决方案是在 textarea 上添加“dragstart”处理程序，并且它在 IE 中完美运行。但在其他浏览器中则不然——我测试了 FF、Chrome、Opera、Safari——它们都忽略了 textarea 或 input[type=text] 上的 Dragstart，同时完美地在 div 或 p 上调用它。

我还尝试将属性 draggable="true" 添加到 textarea - 它也没有帮助（甚至使文本在 Chrome 中不可选择）。

请注意，模拟拖放不是一种情况 - 拖放可能位于另一个窗口中，并且 event.dataTransfer 在某些情况下必须保留链接（而最初选择的源文本根本不是链接）。< /em>

下面是改编自另一个非文本区域相关示例的大型 HTML 示例 (http://help.dottoro.com/external/examples/ljpncnwi/ondragstart_2.htm)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
 <title>ondragstart event example</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <meta name="AUTHOR" content="Dottoro"> 
 <meta name="ROBOTS" content="noindex"> 
 <script type="text/javascript"> 
  function Init () {
   var source = document.getElementById ("source");
   var target = document.getElementById ("target");

   if (source.addEventListener) {  // Firefox, Opera, Google Chrome and Safari
           source.childNodes[0].addEventListener("dragstart", DumpInfo, false);
           source.parentNode.addEventListener("dragstart", DumpInfo, false);

    source.addEventListener ("dragstart", DumpInfo, false);  // Google Chrome, Safari, Firefox from version 3.5
    source.addEventListener ("draggesture", DumpInfo, false); // Firefox earlier than version 3.5
    source.addEventListener ("drag", DumpInfo, false);  // Firefox, Google Chrome, Safari
    source.addEventListener ("dragend", DumpInfo, false);  // Firefox, Google Chrome, Safari

    target.addEventListener ("dragenter", DumpInfo, false);  // Firefox, Google Chrome, Safari
    target.addEventListener ("dragover", DumpInfo, false);  // Firefox, Google Chrome, Safari
    target.addEventListener ("dragleave", DumpInfo, false);  // Google Chrome, Safari, Firefox from version 3.5
    target.addEventListener ("dragexit", DumpInfo, false);  // Firefox
    target.addEventListener ("drop", DumpInfo, false);  // Google Chrome, Safari, Firefox from version 3.5
    target.addEventListener ("dragdrop", DumpInfo, false);  // Firefox earlier than version 3.5
   }
   else {
    source.attachEvent ("ondragstart", DumpInfo);
    source.attachEvent ("ondrag", DumpInfo);
    source.attachEvent ("ondragend", DumpInfo);

    target.attachEvent ("ondragenter", DumpInfo);
    target.attachEvent ("ondragover", DumpInfo);
    target.attachEvent ("ondragleave", DumpInfo);
    target.attachEvent ("ondrop", DumpInfo);
   }
  }

  function DumpInfo (event) {
   if (event === undefined) {
    event = window.event;
   }

   var firedOn = event.target ? event.target : event.srcElement;
   if (firedOn.tagName === undefined) {
    firedOn = firedOn.parentNode;
   }

   var info = document.getElementById ("info");
   if (firedOn.id == "source") {
    info.innerHTML += "<span style='color:#008000'>" + event.type + "</span>, ";
   }
   else {
    info.innerHTML += "<span style='color:#800000'>" + event.type + "</span>, ";
   }

   if (event.type == "dragover") {
     // the dragover event needs to be canceled in Google Chrome and Safari to allow firing the drop event
    if (event.preventDefault) {
     event.preventDefault ();
    }
   }
  }
 </script> 
</head> 
<body onload="Init ();"> 
 <div> 
  <table cellpadding="0px" cellspacing="0px" style="width:100%"> 
   <tr> 
    <td height="30" align="center" style="background-color:#ffffff; border-bottom:1px solid #000000; padding-bottom:5px;"> 
     <span style="font-size:20px;">ondragstart event example</span> 
    </td> 
   </tr> 
   <tr height="230"> 
    <td align="center" valign="middle" style="padding-top:15px; padding-bottom:10px;"> blabla
 <!--input type="text" id="source" style="background-color:#d0f0a0; width:200px" value="Select and drag some text from this field and drop it into the target." /-->
 <textarea id="source" style="background-color:#d0f0a0; width:200px" >Select and drag some text from this field and drop it into the target.</textarea>
 <br /><br /> 
 <textarea id="target" rows="5"> 
  This is the target element.
 </textarea> 
 <br /><br /> 
 <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div> 
    </td> 
   </tr> 
   <tr> 
    <td align="center" class="copyright"> 
     <a target="_blank" rel="nofollow" href="http://help.dottoro.com/common/htm/tou.htm">&copy; 2009 Dottoro.com. All rights reserved. Terms of use.</a> 
    </td> 
   </tr> 
  </table> 
 </div> 
</body> 
</html>
原文

I need a way to detect text dragging start from textarea to be able to replace event.dataTransfer contents on certain condition.

The obvious solution is to add "dragstart" handler on textarea and it perfectly works in IE. But not in other browsers - I tested FF, Chrome, Opera, Safari - all of them ignore dragstart on textarea or input[type=text] while perfectly calling it on div or p.

I've also tried to add attribute draggable="true" to textarea - it didn't help as well (and even made text non-selectable in Chrome).

Please note that emulating drag&drop isn't a case - drop may be in another window and event.dataTransfer has to hold a link in certain case (while initially selected source text isn't a link at all).

Below is the big HTML example adapted from another non-textarea related one (http://help.dottoro.com/external/examples/ljpncnwi/ondragstart_2.htm)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
 <title>ondragstart event example</title> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 <meta name="AUTHOR" content="Dottoro"> 
 <meta name="ROBOTS" content="noindex"> 
 <script type="text/javascript"> 
  function Init () {
   var source = document.getElementById ("source");
   var target = document.getElementById ("target");

   if (source.addEventListener) {  // Firefox, Opera, Google Chrome and Safari
           source.childNodes[0].addEventListener("dragstart", DumpInfo, false);
           source.parentNode.addEventListener("dragstart", DumpInfo, false);

    source.addEventListener ("dragstart", DumpInfo, false);  // Google Chrome, Safari, Firefox from version 3.5
    source.addEventListener ("draggesture", DumpInfo, false); // Firefox earlier than version 3.5
    source.addEventListener ("drag", DumpInfo, false);  // Firefox, Google Chrome, Safari
    source.addEventListener ("dragend", DumpInfo, false);  // Firefox, Google Chrome, Safari

    target.addEventListener ("dragenter", DumpInfo, false);  // Firefox, Google Chrome, Safari
    target.addEventListener ("dragover", DumpInfo, false);  // Firefox, Google Chrome, Safari
    target.addEventListener ("dragleave", DumpInfo, false);  // Google Chrome, Safari, Firefox from version 3.5
    target.addEventListener ("dragexit", DumpInfo, false);  // Firefox
    target.addEventListener ("drop", DumpInfo, false);  // Google Chrome, Safari, Firefox from version 3.5
    target.addEventListener ("dragdrop", DumpInfo, false);  // Firefox earlier than version 3.5
   }
   else {
    source.attachEvent ("ondragstart", DumpInfo);
    source.attachEvent ("ondrag", DumpInfo);
    source.attachEvent ("ondragend", DumpInfo);

    target.attachEvent ("ondragenter", DumpInfo);
    target.attachEvent ("ondragover", DumpInfo);
    target.attachEvent ("ondragleave", DumpInfo);
    target.attachEvent ("ondrop", DumpInfo);
   }
  }

  function DumpInfo (event) {
   if (event === undefined) {
    event = window.event;
   }

   var firedOn = event.target ? event.target : event.srcElement;
   if (firedOn.tagName === undefined) {
    firedOn = firedOn.parentNode;
   }

   var info = document.getElementById ("info");
   if (firedOn.id == "source") {
    info.innerHTML += "<span style='color:#008000'>" + event.type + "</span>, ";
   }
   else {
    info.innerHTML += "<span style='color:#800000'>" + event.type + "</span>, ";
   }

   if (event.type == "dragover") {
     // the dragover event needs to be canceled in Google Chrome and Safari to allow firing the drop event
    if (event.preventDefault) {
     event.preventDefault ();
    }
   }
  }
 </script> 
</head> 
<body onload="Init ();"> 
 <div> 
  <table cellpadding="0px" cellspacing="0px" style="width:100%"> 
   <tr> 
    <td height="30" align="center" style="background-color:#ffffff; border-bottom:1px solid #000000; padding-bottom:5px;"> 
     <span style="font-size:20px;">ondragstart event example</span> 
    </td> 
   </tr> 
   <tr height="230"> 
    <td align="center" valign="middle" style="padding-top:15px; padding-bottom:10px;"> blabla
 <!--input type="text" id="source" style="background-color:#d0f0a0; width:200px" value="Select and drag some text from this field and drop it into the target." /-->
 <textarea id="source" style="background-color:#d0f0a0; width:200px" >Select and drag some text from this field and drop it into the target.</textarea>
 <br /><br /> 
 <textarea id="target" rows="5"> 
  This is the target element.
 </textarea> 
 <br /><br /> 
 <div id="info" style="background-color:#f0f0ff; font-weight:bold;"></div> 
    </td> 
   </tr> 
   <tr> 
    <td align="center" class="copyright"> 
     <a target="_blank" rel="nofollow" href="http://help.dottoro.com/common/htm/tou.htm">© 2009 Dottoro.com. All rights reserved. Terms of use.</a> 
    </td> 
   </tr> 
  </table> 
 </div> 
</body> 
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

挽梦忆笙歌 2024-10-16 14:55:25
  • 创建一个 div，并将 contenteditable 属性设置为模拟文本区域。
  • 使用 javascript，将写入 div 的内容添加到隐藏的文本区域。
  • 在可编辑 div 上使用 dragstart
  • Create a div with the contenteditable attribute set to emulate a textarea.
  • Using javascript, add content written to the div to a hidden textarea.
  • Use dragstart on the editable div instead
回复 原文
~没有更多了~

关于作者

翻了热茶

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文