Я работаю над 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>