Html 禁用文本拖放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1589472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
disable text drag and drop
提问by maniek
There is a common feature of modern browsers where a user can select some text and drag it to an input field. Within the same field it causes moving of text, between different fields it does copying. How do I disable that? If there is no portable way, I am mostly interested in firefox. This is an intranet webapp, so I am also interested in modifying the browser/getting a plugin to do this. Maybe some system-level settings (I`m on windows XP)?
现代浏览器有一个共同的特点，用户可以选择一些文本并将其拖动到输入字段。在同一个字段内它会导致文本移动，在不同的字段之间它会进行复制。我如何禁用它？如果没有可移植的方式，我最感兴趣的是firefox。这是一个 Intranet webapp，所以我也有兴趣修改浏览器/获取插件来做到这一点。也许一些系统级设置（我在 Windows XP 上）？
I need to keep the default select-copy-paste functionality.
我需要保留默认的选择复制粘贴功能。
The background is I have multiple-field data entry forms, and users often drag something by mistake.
背景是我有多个字段的数据输入表单，用户经常错误地拖动一些东西。
采纳答案by Brady
This code will work in all versions of Mozilla and IE.
此代码适用于所有版本的 Mozilla 和 IE。
function preventDrag(event)
{
if(event.type=='dragenter' || event.type=='dragover' || //if drag over event -- allows for drop event to be captured, in case default for this is to not allow drag over target
event.type=='drop') //prevent text dragging -- IE and new Mozilla (like Firefox 3.5+)
{
if(event.stopPropagation) //(Mozilla)
{
event.preventDefault();
event.stopPropagation(); //prevent drag operation from bubbling up and causing text to be modified on old Mozilla (before Firefox 3.5, which doesn't have drop event -- this avoids having to capture old dragdrop event)
}
return false; //(IE)
}
}
//attach event listeners after page has loaded
window.onload=function()
{
var myTextInput = document.getElementById('textInput'); //target any DOM element here
if(myTextInput.addEventListener) //(Mozilla)
{
myTextInput.addEventListener('dragenter', handleEvents, true); //precursor for drop event
myTextInput.addEventListener('dragover', handleEvents, true); //precursor for drop event
myTextInput.addEventListener('drop', preventDrag, true);
}
else if (myTextInput.attachEvent) //(IE)
{
myTextInput.attachEvent('ondragenter', preventDrag);
myTextInput.attachEvent('ondragover', preventDrag);
myTextInput.attachEvent('ondrop', preventDrag);
}
}
回答by maniek
For archival purposes:
用于存档目的：
<body ondragstart="return false" draggable="false"
ondragenter="event.dataTransfer.dropEffect='none'; event.stopPropagation(); event.preventDefault();"
ondragover="event.dataTransfer.dropEffect='none';event.stopPropagation(); event.preventDefault();"
ondrop="event.dataTransfer.dropEffect='none';event.stopPropagation(); event.preventDefault();"
>
does what I wanted. You can add the ondrag* handlers to form elements, too, like <input ondragenter=...>
做我想要的。您也可以将 ondrag* 处理程序添加到表单元素中，例如 <input ondragenter=...>
reference url: https://developer.mozilla.org/En/DragDrop/Drag_Operations
参考网址：https: //developer.mozilla.org/En/DragDrop/Drag_Operations
回答by SyntaxError
This thing works.....Try it.
这东西有效.....试试吧。
<BODY ondragstart="return false;" ondrop="return false;">
hope it helps. Thanks
希望能帮助到你。谢谢
回答by avguchenko
add the following to your field tags:
将以下内容添加到您的字段标签中：
#ondragstart is for IE, onmousedown is for firefox
ondragstart="return false" onmousedown="return false"
回答by Joe Schrag
ondraggestureis supported by older versions of Firefox instead of ondragstart.
ondraggesture由旧版本的 Firefox 而不是ondragstart.
回答by Vinoth K S
Use the following code
使用以下代码
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
and:
和：
<input type="text" ondrop="drop(event)" ondragover="allowDrop(event)">
回答by Wokay
You can use :focus attribute to recognize over what your mouse is:
你可以使用 :focus 属性来识别你的鼠标是什么：
if(document.activeElement.tagName == "INPUT"||document.activeElement.tagName == "TEXTAREA"){
event.preventDefault()
return
}
