禁用文本拖放

Posted

技术标签:

【中文标题】禁用文本拖放【英文标题】:disable text drag and drop 【发布时间】:2010-12-08 01:11:55 【问题描述】:

现代浏览器有一个共同的功能,用户可以选择一些文本并将其拖到输入字段中。在同一字段内,它会导致文本移动,在不同字段之间进行复制。 我该如何禁用它?如果没有便携的方式,我最感兴趣的是firefox。这是一个 Intranet webapp,所以我也有兴趣修改浏览器/获取插件来执行此操作。也许一些系统级设置(我在 Windows XP 上)?

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

背景是我有多字段数据录入表单,用户经常误拖。

【问题讨论】:

发布的答案在技术上应该可以满足您的需求,但我会质疑您的动机 - 您最终可能会惹恼更多的用户而不是您帮助的用户。这听起来可能有点幼稚,但如果人们不知道如何正确使用鼠标,那是他们的问题,而不是你的问题。 好吧,用户要求我实现这样的事情 :) 说真的,感谢它,我ve never seen anybody use this "feature", and I have messed up text I已经编辑了不止一次。关于检查它是否有效 - 我明天上班。 Disable Drag and Drop on html elements?的可能重复 【参考方案1】:

出于存档目的:

<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* 处理程序添加到表单元素,例如

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

【讨论】:

onmousedown="return false;"也适用于 firefox/chrome afaik...可能是错误的...请注意,“魔鬼”可能不会做同样的事情。【参考方案2】:

这东西行得通.....试试看。

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

希望对您有所帮助。谢谢

【讨论】:

【参考方案3】:

此代码适用于所有版本的 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);
 

【讨论】:

【参考方案4】:

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

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

【讨论】:

还有onselectstart 可能有用。 对于 Firefox,这还不够(实际上太多了),它完全禁用了鼠标在给定输入字段上的使用。你甚至不能选择它。 Onselectstart 也不够好。所以,仍然没有解决 firefox 的问题——因为 IE ondragstart 是正确的。 它不起作用,因为 onmousedown="return false" 实际上禁用了 mousedown 事件,所以难怪你不能点击【参考方案5】:

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

【讨论】:

【参考方案6】:

使用以下代码

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/

【讨论】:

【参考方案7】:

您可以使用 :focus 属性来识别您的鼠标是什么:

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

【讨论】:

以上是关于禁用文本拖放的主要内容,如果未能解决你的问题,请参考以下文章

禁用拖放所选文本

H5 拖放

chapter9 拖放

#yyds干活盘点# 4.2 HTML5 拖放(Drag和Drop)

Html5 的拖拽功能

如何在 iOS 11 中禁用 UITextView 中的拖动