我有此代码：

<div id="image-zoom-wrapper" style="position: relative;
        text-align: left;
        width: 2700px;
        height: 340px;
        overflow: auto;
background-color:grey;
float:left;
">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" onclick="var instance = panzoom(this);instance.on('transform',function(e) {controller.pause();});">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" onclick="var instance = panzoom(this);instance.on('transform',function(e) {controller.pause();});">


</div>

<script src=https://unpkg.com/panzoom@8.4.0/dist/panzoom.min.js></script>

实际中： https://jsfiddle.net/xy6hcuaj/

我想在此div中添加几张图像，并让它们全部可自由拖动和缩放，以使人们创建拼贴。

但是当我这样调用图像时，panzoom.js并不是我真正想要的：

onclick="var instance = panzoom(this);instance.on('transform',function(e) {controller.pause();});"

图像应该是可缩放的并且可以自由移动，覆盖等。但是我的代码总是一次移动许多图像：（

非常感谢您提供正确方向的提示。