Question

我正在开发一个Web应用程序，我正在尝试实现一个功能齐全的窗口系统。现在它进展顺利，我只遇到一个小问题。有时当我去拖动我的应用程序的一部分（通常是我的窗口的角落div，它应该触发调整大小操作）时，Web浏览器变得聪明并认为我的意思是拖放一些东西。最终结果是，当浏览器执行拖放操作时，我的操作会被暂停。

是否有一种简单的方法可以禁用浏览器的拖放功能？理想情况下，我希望能够在用户点击某些元素时关闭它，但重新启用它，以便用户仍然可以在我的窗口内容上使用浏览器的常规功能。我正在使用jQuery，虽然我无法找到它浏览文档，但如果你知道一个纯粹的jQuery解决方案，那就太棒了。

简而言之：我需要在用户按下鼠标按钮时禁用浏览器文本选择和拖放功能，并在用户释放鼠标时恢复该功能。

Answer 1

这件事有效.....试试吧。

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

希望它有所帮助。感谢

Answer 2

尝试阻止mousedown事件的默认值：

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

或

<div onmousedown="return false">asd</div>

Answer 3

您只需使用draggable="false"属性即可停用拖动 http://www.w3schools.com/tags/att_global_draggable.asp

Answer 4

这可能有效：您可以禁用css3选择文本，图像和基本上所有内容。

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

当然只适用于较新的浏览器。有关详细信息，请查看：

How to disable text selection highlighting using CSS?

Answer 5

使用jQuery会是这样的：

$(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});

在我的情况下，我想从输入中的drop text禁用用户，所以我使用“drop”而不是“mousedown”。

$(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});

相反，event.preventDefault（）可以返回false。 Here's the difference.

代码：

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});

Answer 6

这是我经常在Web应用程序中使用的小提琴：

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

这将防止您的应用程序上的任何东西被拖放。根据旅游需求，您可以将 body 选择器替换为不应拖动儿童的任何容器。

Answer 7

试试这个

$('#id').on('mousedown', function(event){
    event.preventDefault();
}

Answer 8

对于input个元素，containsKey对我有用。

我在Angular 4的一个自定义输入组件上实现了它，但我认为可以用纯JS实现。

HTML

<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>

组件定义（JS）：

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}

Answer 9

使用@SyntaxError的答案https://stackoverflow.com/a/13745199/5134043

我已经在React中做到了；我唯一能弄清楚的方法是将ondragstart和ondrop方法附加到ref，就像这样：

  col0 col1  col1.1  col3 coly_x  coly_y
0    a    d       1     6     10      50
1    b    e       5     7     20      40

Answer 10

我会把它留在这里。我尝试了一切之后对我有所帮助。

   $(document.body).bind("dragover", function(e) {
        e.preventDefault();
        return false;
   });

   $(document.body).bind("drop", function(e){
        e.preventDefault();
        return false;
   });

Answer 11

问题很古老，但回答永远不会太晚。

$(document).ready(function() {
  //prevent drag and drop
  const yourInput = document.getElementById('inputid');
  yourInput.ondrop = e => e.preventDefault();

  //prevent paste
  const Input = document.getElementById('inputid');
  Input.onpaste = e => e.preventDefault();
});

Answer 12

这个JQuery为我工作： -

$(document).ready(function() {
  $('#con_image').on('mousedown', function(e) {
      e.preventDefault();
  });
});

禁用HTML元素上的拖放？

12 个答案: