Отключить перетаскивание элементов HTML?

Я работаю над веб-приложением, для которого я пытаюсь реализовать полнофункциональную оконную систему. Сейчас все идет очень хорошо, я сталкиваюсь только с одной незначительной проблемой. Иногда, когда я перетаскиваю часть своего приложения (чаще всего это angular элемент моего окна, который должен вызывать операцию изменения размера), веб-браузер становится умным и думает, что я хочу что-то перетащить. Конечный результат, мое действие приостанавливается, пока браузер выполняет функцию перетаскивания.

Есть ли простой способ отключить браузер перетаскивания? В идеале я хотел бы иметь возможность отключить его, пока пользователь нажимает на определенные элементы, но повторно включить его, чтобы пользователи могли по-прежнему использовать обычную функциональность своего браузера в содержимом моих окон. Я использую jQuery, и хотя я не смог найти его, просматривая документы, если бы вы знали чистое решение jQuery, это было бы отлично.

Вкратце: мне нужно отключить выбор текста в браузере и функции перетаскивания, когда мой пользователь нажимает кнопку мыши, и восстановить эту функцию, когда пользователь отпускает мышь.

Ответы

Ответ 1

Попробуйте предотвратить по умолчанию событие mousedown:

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

или

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

Ответ 2

Эта вещь работает..... Попробуйте.

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

надеюсь, что это поможет. Благодаря

Ответ 4

Это может сработать: вы можете отключить выбор с помощью 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?

Ответ 5

С jQuery будет что-то вроде этого:

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

В моем случае я хотел отключить пользователя из текста с отбрасыванием в вводах, поэтому вместо "mousedown" вместо "mousedown" использовал "drop".

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

Вместо event.preventDefault() вы можете вернуть false. Здесь разница.

И код:

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

Ответ 6

попробуйте это

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

Ответ 7

Для элементов 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;
  }
}

Ответ 8

используя ответ @SyntaxError, fooobar.com/questions/73967/...

Мне удалось сделать это в React; единственный способ, которым я мог понять, - это прикрепить методы ondragstart и ondrop к ссылке, например так:

  const panelManagerBody = React.createRef<HTMLDivElement>();
  useEffect(() => {
    if (panelManagerBody.current) {
      panelManagerBody.current.ondragstart = () => false;
      panelManagerBody.current.ondrop = () => false;
    }
  }, [panelManagerBody]);

  return (
    <div ref={panelManagerBody}>

Ответ 9

Я просто оставлю это здесь. Помог мне после того, как я попробовал все.

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

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

Ответ 10

Этот JQuery работал у меня: -

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