Javascript 是否禁用对HTML元素的拖放？_Javascript_Css

Javascript 是否禁用对HTML元素的拖放？

javascript css

Javascript 是否禁用对HTML元素的拖放？,javascript,css,Javascript,Css,我正在开发一个web应用程序，试图为其实现一个功能齐全的窗口系统。现在进展很顺利，我只碰到一个小问题。有时，当我拖动应用程序的一部分（通常是窗口的角div，它应该触发调整大小操作）时，web浏览器变得聪明起来，认为我是想拖放一些东西。最终的结果是，当浏览器执行拖放操作时，我的操作被暂停有没有一种简单的方法来禁用浏览器的拖放功能？理想情况下，我希望能够在用户单击某些元素时将其关闭，但重新启用它，以便用户仍然可以在我的窗口内容上使用浏览器的正常功能。我正在使用jQuery，虽然我在浏览文档时找不到

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

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

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

尝试防止默认的鼠标下降事件：

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

asd

或

asd

这可能有效：您可以使用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;
}

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

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

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

这很有效。试试看

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

使用jQuery时，它将类似于：

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

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

相反，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();
  });
});

只需使用

draggable=“false”

属性即可禁用拖动

对于

输入

元素，适合我

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

HTML

使用@SyntaxError的答案

我在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}>

const panelManagerBody=React.createRef（）；
useffect（（）=>{
if（PanelManagerBy.current）{
PanelManagerBy.current.ondragstart=（）=>false；
panelManagerBody.current.ondrop=（）=>false；
}
}，[panelManagerBody]）；
返回(

我就把它放在这里。在我尝试了所有方法后，他帮了我

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

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

它将防止应用程序上的任何内容被拖放。根据巡演的需要，您可以将body selector替换为儿童不应被拖动的任何容器。

这个问题很老了，但回答永远不会太迟

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

+1-然而，这在Firefox（6.0及更低版本）中有着不幸的副作用它阻止将

：active

伪类应用于元素。这意味着我不能将其用于我的链接。非常感谢。我想要一个可点击的

div

，但禁用了拖动功能。@IonicăBizău如果你想让东西可点击，最好使用按钮或标签，因为某些设备没有鼠标和鼠标chscreens将识别这些选项，并让用户可以选择它们。我建议@SyntaxError的答案（低于100票）应该是选中的答案，因为它不会影响非拖动操作。

$('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();
});