在HTML元素上禁用拖放功能？

109

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

有没有简单的方法可以禁用浏览器的拖放功能？理想情况下，我希望能够在用户单击某些元素时将其关闭，但是要重新启用它，以便用户仍可以在我的Windows内容上使用其浏览器的正常功能。我正在使用jQuery，尽管在浏览文档时找不到它，但是如果您知道一个纯jQuery解决方案，那将是很好的选择。

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

— 尼古拉斯·弗林特
source

2

我会推荐@SyntaxError的答案（低于100票）应该是选定的答案，因为它不会影响非拖动操作。

— 肖恩·威尔逊

78

尝试防止默认事件mousedown：

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

要么

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

— 谢尔盖·伊林斯基
source

2

+1-但是，这在Firefox（6.0及更低版本）中具有不利的副作用，在这种情况下，它会阻止将:active伪类应用于元素。这意味着我不能真正将其用于链接。

— 安迪E

3

抱歉，这太糟糕了。请参阅下面的答案。

— Madbreaks '18

216

这个东西有用.....尝试一下。

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

希望能帮助到你。谢谢

— 语法错误
source

6

很棒！（属性也可以放置在<div>元素上。）

— VasiliNovikov 2014年

4

为这个答案投票。IMO的mousedown事件太短（在其他情况下，可以使用mousedown事件）。这个答案非常好:)

— Daniel van Dommele 2014年

4

这确实是一个更好的答案，将鼠标向下按下“ preventDefault（）”会产生太多副作用（例如，防止表单文本输入的焦点/焦点不集中）

— Jecimi

这应该是可接受的答案，因为这不会影响单击操作。

— rafaelmorais

这加上copy paste侦听器似乎是迫使用户键入输入内容而不是粘贴/拖动某些内容而不会对页面的其他部分产生不利影响的完美解决方案。

— Daniel Bonnell '18

21

您可以仅通过使用draggable="false"属性来禁用拖动。
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
source

在Chrome 59中像魅力一样工作

— kashiraja

1

这应该是公认的答案，非JS，简单的HTML属性，它在所有浏览器都支持：developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/...

— 克里斯-

1

这是最好的答案

— Argun

12

这可能会起作用：您可以使用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;
}

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

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

— 胡说
source

非常感谢。我想要一个可点击的按钮div，但是禁用了拖动功能。

— 尼卡比曹

@IonicăBizău如果您想使事物可点击，则最好使用按钮或标签，因为某些没有鼠标和触摸屏的设备会识别它们并使用户可以选择。

— Tosh 2014年

8

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

— 维克多·罗曼诺
source

2

我经常在我的Web应用程序中使用这玩弄：

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

这将防止您的应用程序上的任何东西被拖放。根据旅行需要，您可以用任何不应拖拉儿童的容器来替换车身选择器。

— s
source

0

试试这个

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

— 疯子
source

0

对于input元素，此答案对我有用。

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

— 铁托·莱瓦（Tito Leiva）
source

0

使用@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}>

— 克里斯卡特
source

0

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

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

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

— Checknov
source

-1

这个jQuery对我有用：-

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

— 皮尤什
source