(Javascript) | 交互.js在多个 div 上捏合缩放，相同的类不起作用

Question

我正在尝试使用交互.js来获得一些可以捏缩放的元素。 但是我有一个问题，因为当我复制元素时，它会停止工作。

正如您从此处的代码片段中看到的那样，我有两个名为class=gesture-area的相同元素，在每个元素中，都有一个带有class=scale-element的div。

我只能使用document.querySelector()捏缩放其中的第一个.

我不知道如何启用所有div 进行捏缩放。

如何在页面上的多个divs上使用此脚本？

function dragMoveListener (event) {
var target = event.target
// keep the dragged position in the data-x/data-y attributes
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)'
// update the posiion attributes
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener



var angleScale = {
angle: 0,
scale: 1
}
//var gestureArea = document.getElementsByClassName('gesture-area')
var gestureArea = document.querySelector('.gesture-area')
//var scaleElement = document.getElementsByClassName('scale-element')
var scaleElement = document.querySelector('.scale-element')
var resetTimeout
console.log(gestureArea);
interact(gestureArea)
.gesturable({
onstart: function (event) {
angleScale.angle -= event.angle
clearTimeout(resetTimeout)
scaleElement.classList.remove('reset')
},
onmove: function (event) {
// document.body.appendChild(new Text(event.scale))
var currentAngle = event.angle + angleScale.angle
var currentScale = event.scale * angleScale.scale
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
// uses the dragMoveListener from the draggable demo above
dragMoveListener(event)
},
onend: function (event) {
angleScale.angle = angleScale.angle + event.angle
angleScale.scale = angleScale.scale * event.scale
//resetTimeout = setTimeout(reset, 1000)
scaleElement.classList.add('reset')
}
})
.draggable({ onmove: dragMoveListener })
function reset () {
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'scale(1)'
angleScale.angle = 0
angleScale.scale = 1
}

.pinchzoomarea {
display: flex;
width: 300px;
height: 300px;
margin-bottom: 9px;
justify-content: center;
align-items: center;
background-color: #a80000;
}

.gesture-area {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100px;
height: 100px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.scale-element {
display: block;
max-width: 100%;
margin: auto;
touch-action: none;
width: 100%;
height: 100%;
background-color: #fff;
background-position: 0px 0px;
background-size: cover;
cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/interactjs@latest/dist/interact.min.js"></script>
<div class="pinchzoomarea">
<div id="gesture-area" class="gesture-area">
<div id="scale-element" class="scale-element"></div>
</div>
</div>
<div class="pinchzoomarea">
<div class="gesture-area">
<div class="scale-element"></div>
</div>
</div>

Answer 1

确定解决了， 需要将选择器更改为以下内容：event.target.parentElement.children[0];现在 JS 是：

function dragMoveListener (event) {
var target = event.target
// keep the dragged position in the data-x/data-y attributes
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)'
// update the posiion attributes
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
}
// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener

var angleScale = {
angle: 0,
scale: 1
}

interact('.gesture-area')
.gesturable({
onstart: function (event) {
angleScale.angle -= event.angle
clearTimeout(resetTimeout)
//scaleElement.classList.remove('reset')
},
onmove: function (event) {
var currentAngle = event.angle + angleScale.angle
var currentScale = event.scale * angleScale.scale
var close = event.target.parentElement.children[0];
var scaleElement = event.target.parentElement.children[1];
console.log(scaleElement)
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'rotate(' + currentAngle + 'deg)' + 'scale(' + currentScale + ')'
dragMoveListener(event)
},
onend: function (event) {
var close = event.target.parentElement.children[0];
var scaleElement = event.target.parentElement.children[1];
angleScale.angle = angleScale.angle + event.angle
angleScale.scale = angleScale.scale * event.scale
resetTimeout = setInterval(() => {
}, interval);(reset, 1000)

}

})
.draggable({ onmove: dragMoveListener })
function reset () {
scaleElement.style.webkitTransform =
scaleElement.style.transform =
'scale(1)'
angleScale.angle = 0
angleScale.scale = 1
}
setInterval