Dragstart и textarea: как поймать, что пользователь начал перетаскивать выделенный текст? - PullRequest
Новая
       32

Dragstart и textarea: как поймать, что пользователь начал перетаскивать выделенный текст?

0 голосов
/ 23 декабря 2010

Мне нужен способ определения начала перетаскивания текста из textarea, чтобы иметь возможность заменить содержимое event.dataTransfer при определенных условиях.

Очевидное решение - добавить обработчик "dragstart" вtextarea и он отлично работает в IE.Но не в других браузерах - я тестировал FF, Chrome, Opera, Safari - все они игнорируют dragstart на textarea или input [type = text], в то же время прекрасно вызывая его на div или p.

Я также пробовалдобавить атрибут draggable = "true" к текстовой области - это также не помогло (и даже сделал текст недоступным для выбора в Chrome).

Обратите внимание, что эмулирует перетаскиваниеэто не случай - падение может быть в другом окне, и event.dataTransfer должен удерживать ссылку в определенном случае (хотя изначально выбранный исходный текст вообще не является ссылкой).

Нижебольшой пример HTML, адаптированный из другого, не связанного с textarea (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>

1 Ответ

0 голосов
/ 05 февраля 2011
  • Создать div с атрибутом contenteditable, установленным для эмуляции текстовой области.
  • Используя javascript, добавить содержимое, записанное в div, в скрытую текстовую область.
  • Использовать dragstart вместо редактируемого div
...