Вимкнути перетягування елементів HTML?

109

Я працюю над веб-додатком, для якого я намагаюся впровадити повнофункціональну систему вікон. Зараз це йде дуже добре, я стикаюся лише з однією незначною проблемою. Іноді, коли я йду перетягувати частину своєї програми (найчастіше кутовий розділ мого вікна, який повинен викликати операцію зміни розміру), веб-браузер стає розумним і думає, що я маю на увазі щось перетягнути. Кінцевий результат, моя дія затримується, коли браузер робить її перетягуванням.

Чи є простий спосіб відключити перетягування браузера? Ідеально хотілося б вимкнути його, коли користувач натискає певні елементи, але повторно ввімкнути його, щоб користувачі все ще могли використовувати звичайну функціональність свого браузера на вмісті мого вікна. Я використовую jQuery, і хоча мені не вдалося знайти його, переглядаючи документи, якщо ви знаєте чисте рішення jQuery, це було б чудово.

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

— Ніколас Флінт
джерело

2

Я б заохочував, що відповідь @ SyntaxError (нижче, 100+ голосів) має бути обраною відповіддю, оскільки це не впливає на неперетягуючі операції.

— Shaun Wilson

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

216

Ця річ працює ..... Спробуйте.

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

сподіваюся, що це допомагає. Дякую

— Синтаксична помилка
джерело

6

Чудово працює! (Атрибути можуть бути розміщені і на <div>елементі.)

— Василь Новиков

4

проголосували за цю відповідь. Відповідь у власному місті IMO надто короткий (ви можете використовувати подію mousedown для інших випадків). Ця відповідь спрацювала чудово :)

— Даніель ван Доммеле

4

Це дійсно набагато краща відповідь, тому що вказівник 'prevenDefault ()' має занадто багато побічних ефектів (наприклад, запобігання фокусування / розфокусування тексту введення тексту)

— Jecimi

Це має бути прийнятою відповіддю, оскільки це не вплине на дію кліку.

— rafaelmorais

Це в поєднанні зі copy pasteслухачем здається ідеальним рішенням змусити користувача вводити вхід, а не вставляти / перетягувати щось, не впливаючи негативно на інші частини сторінки.

— Даніель Боннелл

21

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

— icl7126
джерело

Працює як шарм у Chrome 59

— kashiraja

1

Це має бути прийнята відповідь, не JS, простий атрибут HTML, який підтримується у всіх браузерах: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

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 Якщо ви хочете зробити речі доступними для натискання, краще скористатися кнопкою або тегом, оскільки певні пристрої без мишей та сенсорних екранів розпізнають їх та роблять їх вибірними для користувачів.

— Тош

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

— crazyjune
джерело

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

— kriskate
джерело

0

Я просто залишу його тут. Допоміг мені після того, як я спробував усе.

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

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

— чекнов
джерело

-1

Цей JQuery працював для мене: -

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

— Піюш
джерело