Firefox Dragstart和textarea：如何捕获用户开始拖动某些选定文本？
我需要一种从textarea开始检测文本拖动的方法，以便能够在特定条件下替换event.dataTransfer内容 显而易见的解决方案是在textarea上添加dragstart处理程序，它在IE中可以完美地工作。但在其他浏览器中不行——我测试了FF、Chrome、Opera、Safari——它们都忽略了textarea或input[type=text]上的dragstart，而在div或p上完美地调用了它 我还尝试将属性draggable=true添加到textarea中，但效果并不理想，甚至使文本在Chrome中无法选择 请注意，模拟拖放不是大小写-拖放可能位于另一个窗口和事件中。在某些情况下，dataTransfer必须保留链接，而最初选择的源文本根本不是链接 下面是从另一个与文本区域无关的HTML示例改编而来的大型HTML示例http://help.dottoro.com/external/examples/ljpncnwi/ondragstart_2.htmFirefox Dragstart和textarea：如何捕获用户开始拖动某些选定文本？,firefox,drag-and-drop,textarea,draggable,Firefox,Drag And Drop,Textarea,Draggable,我需要一种从textarea开始检测文本拖动的方法，以便能够在特定条件下替换event.dataTransfer内容 显而易见的解决方案是在textarea上添加dragstart处理程序，它在IE中可以完美地工作。但在其他浏览器中不行——我测试了FF、Chrome、Opera、Safari——它们都忽略了textarea或input[type=text]上的dragstart，而在div或p上完美地调用了它 我还尝试将属性draggable=true添加到textarea中，但效果并不理想，甚
<!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>