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

109

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

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

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

— Николас Флинт
источник

2

Я бы продвигал, что ответ @ SyntaxError (ниже, более 100 голосов) должен быть выбранным ответом, поскольку он не влияет на операции без перетаскивания.

— Шон Уилсон

78

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

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

или

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

— Сергей Ильинский
источник

2

+1 - однако это имеет неприятный побочный эффект в Firefox (6.0 и ниже), где он предотвращает применение :activeпсевдокласса к элементу. Это означает, что я не могу использовать его для своих ссылок.

— Энди Э

3

Простите, это ужасно. См. Ответ ниже.

— Madbreaks

217

Эта штука работает ..... Попробуй.

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

Надеюсь, поможет. Спасибо

— Ошибка синтаксиса
источник

6

Прекрасно работает! (Атрибуты также могут быть помещены в <div>элемент.)

— VasiliNovikov

4

проголосовали за этот ответ. Ответ mousedown IMO слишком короткий (вы можете использовать событие mousedown для других случаев). Этот ответ сработал отлично :)

— Daniel van Dommele

4

Это действительно намного лучший ответ, поскольку 'preventDefault ()' при нажатии мыши имеет слишком много побочных эффектов (например, предотвращение фокуса / расфокусировки ввода текста формы)

— Jecimi

Это должен быть принятый ответ, поскольку он не повлияет на действие щелчка.

— rafaelmorais

Это в сочетании со copy pasteслушателем кажется идеальным решением, чтобы заставить пользователя вводить ввод, а не вставлять / перетаскивать что-то, не влияя отрицательно на другие части страницы.

— Daniel Bonnell

21

Вы можете отключить перетаскивание, просто используя draggable="false"атрибут.
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
источник

Работает как шарм в Chrome 59

— kashiraja

1

Это должен быть принятый ответ, простой атрибут HTML, отличный от JS, который поддерживается во всех браузерах: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— Крис,

1

это лучший ответ

— Аргун

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?

— Тош
источник

Огромное спасибо. Я хочу щелкнуть div, но с отключенным перетаскиванием.

— Ionică Bizău

@ Ionică Bizău Если вы хотите сделать объекты интерактивными, лучше использовать кнопку или тег, поскольку некоторые устройства без мышей и сенсорных экранов распознают их и сделают их доступными для выбора пользователями.

— Tosh

8

С jQuery это будет примерно так:

$(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. Вот в чем разница.

И код:

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

— Виктор Романо
источник

2

Я всегда использую эту скрипку для своих веб-приложений:

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

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

— Лис
источник

0

попробуй это

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

— сумасшедший
источник

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

— Тито Лейва
источник

0

используя ответ @ SyntaxError, https://stackoverflow.com/a/13745199/5134043

Мне удалось это сделать в 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}>

— крискейт
источник

0

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

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

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

— Checknov
источник

-1

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

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

— Пиюш
источник