我正在开发一个 Web 应用程序，我正在尝试为其实现一个功能齐全的窗口系统。现在一切都很顺利，我只遇到了一个小问题。有时当我去拖动我的应用程序的一部分（通常是我的窗口的角落 div，它应该触发调整大小操作）时，Web 浏览器会变得很聪明，并认为我的意思是拖放一些东西。最终结果是，当浏览器执行拖放操作时，我的操作被暂停。
有没有一种简单的方法可以禁用浏览器的拖放功能？理想情况下，我希望能够在用户单击某些元素时将其关闭，但重新启用它，以便用户仍然可以在我的窗口内容上使用浏览器的正常功能。我正在使用 jQuery，虽然我在浏览文档时找不到它，但如果您知道纯 jQuery 解决方案，那就太好了。
简而言之：我需要在用户按下鼠标按钮时禁用浏览器文本选择和拖放功能，并在用户释放鼠标时恢复该功能。
【问题讨论】：
标签： javascript css
这行得通。试试看。
<BODY ondragstart="return false;" ondrop="return false;">
【讨论】：
尝试阻止 mousedown 事件的默认设置：
<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>
或
<div onmousedown="return false">asd</div>
【讨论】：
:active 伪类应用于元素。这意味着我不能真正将它用于我的链接。
您可以简单地使用draggable="false" 属性来禁用拖动。
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable http://www.w3schools.com/tags/att_global_draggable.asp
【讨论】：
这可能有效：您可以禁用使用 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;
}
当然只适用于较新的浏览器。更多详情请查看：
【讨论】：
div，但禁用了拖动。
使用 jQuery 会是这样的：
$(document).ready(function() {
$('#yourDiv').on('mousedown', function(e) {
e.preventDefault();
});
});
在我的例子中，我想禁止用户在输入中放置文本，所以我使用“drop”而不是“mousedown”。
$(document).ready(function() {
$('input').on('drop', function(event) {
event.preventDefault();
});
});
您可以返回 false 而不是 event.preventDefault()。 Here's the difference.
还有代码：
$(document).ready(function() {
$('input').on('drop', function() {
return false;
});
});
【讨论】：
这是我在 Web 应用程序中经常使用的小提琴：
$('body').on('dragstart drop', function(e){
e.preventDefault();
return false;
});
它将防止您的应用程序上的任何内容被拖放。根据游览需要，您可以将 body 选择器替换为任何不应拖动儿童的容器。
【讨论】：
试试这个
$('#id').on('mousedown', function(event){
event.preventDefault();
}
【讨论】：
对于input 元素，this answer 适合我。
我在 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;
}
}
【讨论】：
使用@SyntaxError 的答案https://stackoverflow.com/a/13745199/5134043
我已经设法在 React 中做到了；我能想到的唯一方法是将 ondragstart 和 ondrop 方法附加到 ref，如下所示：
const panelManagerBody = React.createRef<HTMLDivElement>();
useEffect(() => {
if (panelManagerBody.current) {
panelManagerBody.current.ondragstart = () => false;
panelManagerBody.current.ondrop = () => false;
}
}, [panelManagerBody]);
return (
<div ref={panelManagerBody}>
【讨论】：
我就把它留在这里。在我尝试了一切之后帮助了我。
$(document.body).bind("dragover", function(e) {
e.preventDefault();
return false;
});
$(document.body).bind("drop", function(e){
e.preventDefault();
return false;
});
【讨论】：
问题很老，但回答永远不会太晚。
$(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();
});
【讨论】：
你可以简单地在元素本身上使用draggable="false"，否则你可以放
on-mousedown="preventDefaultDrag"
...
preventDefaultDrag: function(ev) {
ev.preventDefault();
},
【讨论】：
这个 JQuery 为我工作：-
$(document).ready(function() {
$('#con_image').on('mousedown', function(e) {
e.preventDefault();
});
});
【讨论】：