简体   繁体   English

禁用文本拖放

[英]disable text drag and drop

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. 如果没有便携方式,我最感兴趣的是firefox。 This is an intranet webapp, so I am also interested in modifying the browser/getting a plugin to do this. 这是一个内部网webapp,所以我也有兴趣修改浏览器/获取插件来执行此操作。 Maybe some system-level settings (I`m on windows XP)? 也许一些系统级设置(我在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. 背景是我有多字段数据输入表单,用户经常误删东西。

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

This thing works.....Try it. 这件事有效.....试试吧。

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

hope it helps. 希望能帮助到你。 Thanks 谢谢

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

add the following to your field tags: 将以下内容添加到字段标记中:

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

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

See: http://jsfiddle.net/zLYGF/25/ 请参阅: http//jsfiddle.net/zLYGF/25/

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
        }

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM