Отключить перетаскивание элементов 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();
  });
});
Пиюш
источник