Отключить перетаскивание на HTML-элементы? - PullRequest
Новая
       9

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

91 голосов
/ 01 апреля 2009

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

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

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

Ответы [ 8 ]

188 голосов
/ 06 декабря 2012

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

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

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

67 голосов
/ 01 апреля 2009

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

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

или 

<div onmousedown="return false">asd</div>
14 голосов
/ 12 февраля 2017

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

13 голосов
/ 02 сентября 2012

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

7 голосов
/ 27 декабря 2013

С 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;
  });
});
0 голосов
/ 29 января 2019

Для input элементы, этот ответ работает для меня. * * 1004

я реализовал его на пользовательский компоненте ввода в угловых 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 голосов
/ 27 августа 2015

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

$(document).ready(function() {
  $('#con_image').on('mousedown', function(e) {
      e.preventDefault();
  });
});
0 голосов
/ 17 апреля 2015

попробуйте 

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