禁用对 HTML 元素的拖放?

我正在开发一个 web 应用程序,我正在尝试实现一个功能齐全的视窗系统。现在进展很顺利,我只遇到一个小问题。有时,当我拖动应用程序的一部分时(通常是我窗口的边角 div,它应该会触发一个调整大小的操作) ,浏览器会变聪明,认为我想要拖放什么东西。最终结果是,当浏览器执行拖放操作时,我的操作被搁置。

有没有一种简单的方法来禁用浏览器的拖放?我希望能够在用户点击某些元素时关闭它,但是重新启用它,这样用户仍然可以在我的窗口中使用他们浏览器的正常功能。我使用的是 jQuery,虽然我无法在浏览文档时找到它,但如果您知道一个纯 jQuery 解决方案,那将是非常棒的。

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

248850 次浏览

尝试防止鼠标向下事件的默认设置:

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

或者

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

这也许可以: 你可以禁用 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;
}

当然,只适用于较新的浏览器。更多细节请参考:

如何禁用文本选择突出显示

注意: 这样做有一些明显的用户体验缺点,因为它阻止用户轻易地复制文本,请注意这一点。

这个有用,试试看。

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

使用 jQuery,它会是这样的:

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

在我的例子中,我想禁用用户在输入中删除文本,所以我使用了“ drop”而不是“ mousedown”。

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

相反,您可以返回 false

还有密码:

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

试试这个

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

这个 JQuery 适合我:-

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

对于 input元素,这个答案适合我。

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

超文本标示语言

<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 中做到了这一点; 我能想到的唯一方法是将 ondrastart 和 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;
});

这是我在 Web 应用程序中经常使用的一种方法:

$('body').on('dragstart 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();
});

您可以简单地对元素本身使用 dragable = “ false”,否则可以将

on-mousedown="preventDefaultDrag"
...
preventDefaultDrag: function(ev) {
ev.preventDefault();
},