Question

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

显而易见的解决方案是在textarea上添加“dragstart”处理程序，它在IE中完美有效。但不是在其他浏览器中 - 我测试过FF，Chrome，Opera，Safari - 所有这些都忽略了textarea上的dragstart或输入[type = text]，同时在div或p上完美地调用它。

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

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

以下是从另一个与非文本区相关的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>

Answer 1

创建一个div，其contenteditable属性设置为模拟textarea。
使用javascript，将写入div的内容添加到隐藏的textarea。
在可编辑的div上使用dragstart

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

1 个答案: