代码之家 › 专栏 › 技术社区 › Blank

禁用HTML元素上的拖放?

webbrowser-control css jquery javascript

146

Blank · 技术社区 · 16 年前

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

13 回复 | 直到 4 年前

234

Christopher Moore 5 年前

这行得通。试试看。

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

Sergey Ilinsky 16 年前

尝试阻止默认的mousedown事件:

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

或

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

icl7126 4 年前

draggable="false" 属性。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable http://www.w3schools.com/tags/att_global_draggable.asp

Community CDub 8 年前

.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

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

Community CDub 8 年前

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

在我的例子中,我想禁止用户在输入中拖放文本,所以我使用了“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;
  });
});

Lis 6 年前

这是我在Web应用程序中经常使用的一个技巧:

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

选择器带有任何儿童不应拖动的容器。

crazyjune 10 年前

我就把它留在这里。在我尝试了一切之后,他帮助了我。

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

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

Tito Leiva 6 年前

试试这个

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

kriskate 6 年前

对于 input 元素, this answer 为我工作。

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

checknov 6 年前

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

SecretAgentMan Dor Budkov 5 年前

这个问题很古老,但回答永远不会太晚。

$(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

Piyush 10 年前

你可以简单地在元素本身上使用draggable=“false”,否则你可以

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