Запретить перетаскивание ngb-аккордеона, но разрешить выделение текста - PullRequest
Новая
       10

Запретить перетаскивание ngb-аккордеона, но разрешить выделение текста

0 голосов
/ 11 июня 2018

Запретить перетаскивание аккордеона, но все же разрешить выделение текста

У меня есть некоторые данные в ngb-гармошке, щелкнув по которым, они развернутся и отобразят данные.В стороне названия аккордеона у нас есть поле ввода. Когда вы пытаетесь скопировать содержимое поля ввода с помощью мыши, оно автоматически добавляет URL-адрес браузера в поле ввода.Поскольку поле ввода добавляется внутри заголовка аккордеона, для заголовка внутреннего аккордеона используются ссылки, в HTML по умолчанию используется перетаскивание ссылки ... но я хочу отключить это для определенных ссылок.

TL; DR : я хочу иметь возможность выделить текст ввода, который находится внутри названия аккордеона и , а не перетаскивать его.

Вот пример изображения: при попытке выбратьсодержимое поля ввода, оно копирует URL браузера в значение поля ввода.enter image description here

Вот мой угловой HTML-код: 

<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <input class="no-drag" type="text" placeholder="sample" (click)="onclick($event);">
      Expand
    </ng-template>
    <ng-template ngbPanelContent>
      Panel 1
    </ng-template>
  </ngb-panel>
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Panel 2
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Пример кода доступен здесь: https://stackblitz.com/edit/angular-kakf4g

  1. Мы должны иметь возможность выделять текст в поле ввода с помощью мыши
  2. . Он не должен копировать URL браузера в поле ввода.
  3. Он должен работать для всех основных браузеров, таких как Chorme, Edgeи Firefox.

Чтобы исправить проблемы,

Я попытался отключить перетаскивание ссылок, чтобы проблема 1 и 2 была исправлена ​​с помощью ниже css.Это решает проблему только для браузера Chrome, но не решает проблему для других браузеров. 

:host /deep/ a {
    -webkit-user-drag: none !important;
}

Примечание. Я добавил draggable = 'false' в поле ввода, но это не сработало.И angular помещает мое поле ввода в тег, так что автоматически мое поле ввода получает характер ссылки.Любая помощь будет оценена.

...