禁用文本拖放功能

Question

禁用文本拖放功能

htmldrag-and-drop

18

现代浏览器有一个常见的功能，用户可以选择一些文本并将其拖动到输入字段中。如果在同一字段内，则会移动文本；如果在不同字段之间，则会进行复制。

我该如何禁用这个功能？如果没有通用方法，我主要关注Firefox。这是一个内部网页应用程序，因此我也对修改浏览器/获取插件来执行此操作感兴趣。也许可以通过一些系统级别的设置（我使用的是Windows XP）。

我需要保留默认的选择-复制-粘贴功能。

背景是我有多个字段数据输入表格，用户经常出现误操作而意外拖动某些内容。

- maniek

发布的答案在技术上可以做到您想要的，但是我会质疑您的动机——您可能会惹恼更多用户，而不是帮助他们。这可能听起来有点天真，但如果人们无法弄清楚如何正确使用鼠标，那就是他们的问题，而不是您的问题。 - DisgruntledGoat

好的，用户要求我实现这样一件事情 :) 说真的，我从来没有见过有人使用这个“功能”，而且由于它，我编辑过的文本已经混乱了不止一次。关于检查它是否有效 - 我明天会在工作中进行。 - maniek

可能是禁用HTML元素的拖放？的重复问题。 - palswim

7个回答

11

这个东西有效......试试吧。

<BODY ondragstart="return false;" ondrop="return false;">

希望有所帮助。谢谢。

- SyntaxError

5

此代码可在所有版本的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);
 }
}

- Brady

3

请将以下内容添加到您的字段标签中：

#ondragstart is for IE, onmousedown is for firefox
ondragstart="return false" onmousedown="return false"

- trondozer

还有onselectstart可能会很有用。 - DisgruntledGoat

对于Firefox而言，这还不够（实际上太多了），它完全禁用了给定输入字段上的鼠标使用。您甚至无法选择它。 Onselectstart 也不够好。因此，Firefox仍然没有解决方案-对于IE而言，ondragstart做得很正确。 - maniek

它不起作用是因为onmousedown="return false"，这实际上禁用了mousedown事件，所以难怪你无法点击。 - Jacek Pietal

0

你可以使用:focus属性来识别鼠标悬停的位置：

        if(document.activeElement.tagName == "INPUT"||document.activeElement.tagName == "TEXTAREA"){
            event.preventDefault()
            return
        }

- Wokay

0

请使用以下代码。

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));
}

并且：

<input type="text" ondrop="drop(event)" ondragover="allowDrop(event)">

请参见：http://jsfiddle.net/zLYGF/25/

- Vinoth K S

0

ondraggesture被旧版本的Firefox支持，而不是ondragstart。

- Joe Schrag

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- maniek · Accepted Answer

为了归档目的：

<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();"
>

它实现了我想要的功能。你也可以将 ondrag* 处理程序添加到表单元素中，比如 <input ondragenter=...>。

参考网址：https://developer.mozilla.org/En/DragDrop/Drag_Operations