Как сделать изображение SVG не перетаскиваемым и кликабельным - PullRequest
0 голосов
/ 06 января 2020

Я работаю над svg image slider, и все работает нормально, пока я не загружу изображение с текстом. Затем, когда я перетаскиваю мышью, текст выделяется, и это нормально. Когда я блокирую это с css свойствами:

  user-select: none
  -moz-user-select: none
  -webkit-user-drag: none
  -webkit-user-select: none
  -ms-user-select: none
  pointer-events: none

Все работает снова, но при этом каждое действие onclick в элементе svg блокируется. У меня вопрос: как сделать элемент перетаскиваемым и одновременно активировать действие onclick.

Редактировать

Я предоставляю пример кода для своей проблемы, надеюсь, он все прояснит.

document.getElementById('inspector-wrapper').addEventListener('mousedown', () => {
      const lastObjX = this.imgX; // getting img X,Y
      const lastObjY = this.imgY;
      this.lastX = this.currentX; // getting start X,Y
      this.lastY = this.currentY;
      console.log(this.currentX);
      this.interval = setInterval(() => { // when holding mouse1
        this.definePosition(lastObjX, lastObjY);
      }, 10);

      private definePosition(lastObjX: number, lastObjY: number) {
        const distanceToMoveX = this.currentX - this.lastX;
        if (distanceToMoveX !== 0) {
          this.imgX = lastObjX + distanceToMoveX; // setting new X
        }
        if (this.isYAvailable()) { // if Y available set new value
          const distanceToMoveY = this.currentY - this.lastY;
          if (distanceToMoveY !== 0) {
            this.imgY = lastObjY + distanceToMoveY;
          }
        }
        this.setImgXY();
      }
#inspector-wrapper
  position: absolute
  overflow: hidden
  background-color: transparent

\:host::ng-deep object
  position: absolute
  left: 0
  top: 0
  user-select: none
  -moz-user-select: none
  -webkit-user-drag: none
  -webkit-user-select: none
  -ms-user-select: none
  pointer-events: none
<div id="inspector-wrapper">
  <object data="../assets/main.svg" id="test" type="image/svg+xml"></object>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...