写一个效果，就是在一个轮播图中任意拖动图片，把图片拖拽就是相当于复制到另一个div盒子中,但原图片不动，原图还是在轮播图中

[随_声]

写一个效果，就是在一个轮播图中任意拖动图片，把图片拖拽就是相当于复制到另一个div盒子中（这个div盒子里就是栅格布局的九宫格）也可以在到这个div里任意拖动，打开一个按钮又可以只能放到网格里的格子中，任意拖动到哪个网格中，但原图片不动，原图还是在轮播图中。
我写了一个demo，可以任意拖动，但我在写那个网格的时候就拖动不了了，求大佬解惑。

[随_声]

我写好可以以拖动了，但是，当我拖动到那个div网格时，他会显示在div网格下面，但只要我松开网格他就浮现在网格上，有待解决，还有就是拖动缩放问题问题，写一个demo只能拖动第一个图，应为我用的时getElementById('imgs')写的，但我的轮播图有好多个，这个怎么改
<img src="image/p1.png" style="width:300px;position:absolute;left:100px;top:100px;" id="imgsrc" class="cdft" />
<img src="image/p2.png" style="width:300px;position:absolute;left:100px;top:200px;" id="imgsrc" class="cdft" />
<img src="image/p3.png" style="width:300px;position:absolute;left:100px;top:300px;" id="imgsrc" class="cdft" />
<img src="image/p4.png" style="width:300px;position:absolute;left:100px;top:400px;" id="imgsrc" class="cdft"/>





<script type="text/javascript">
var img=document.getElementByName('imgsrc');
var span=10;
var isDrag=null;
var isIE=!!document.all;
var ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false;
var percent=img.offsetHeight/img.offsetWidth;
function mouseMove(e){
e=e||event;
var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img.offsetWidth,imgH=img.offsetHeight;
if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img.className='cnwr';
else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img.className='cner';
else if(x<=span||x>=imgW-span)img.className='chr';
else if(y<=span||y>=imgH-span)img.className='cvr';
else img.className='cdft';

}
function mouseDown(e){
e=e||event;
ex=e.clientX;//保存当前鼠标X轴的坐标
ey=e.clientY;//保存当前鼠标y轴的坐标
ox=parseInt(img.style.left);
oy=parseFloat(img.style.top);
if(img.className=='cdft'){
isDrag=true;
img.className='cmove';
}
else{
isDrag=false;
oh=img.offsetHeight;//获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
ow=img.offsetWidth;
var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY;//相对容器的水平坐标,相对容器的垂直坐标
chrPosX=x<=span;
chrPosY=y<=span;
if(e.ctrlKey){//事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住
ow=oh/percent;//根据比例计算出宽度
img.style.width=ow;//更新图片宽度
}
}
if(isIE)img.setCapture();
document.onmousemove=mouseDownAndMove;
img.onmousemove=null;
return false;
}
function mouseDownAndMove(e){
e=e||event;
if(isDrag===true){
img.style.left=ox+e.clientX-ex+'px';
img.style.top=oy+e.clientY-ey+'px';
}
else if(isDrag===false){
var x=e.clientX-ex,y=e.clientY-ey;
switch(img.className){
case 'chr':
x=chrPosX?-x:x;
y=e.ctrlKey?percent*x+oh:oh;
img.style.width=ow+x+'px';
img.style.height=y+'px';
if(chrPosX)img.style.left=ox-x+'px';
break;
case 'cvr':
y=chrPosY?-y:y;
x=e.ctrlKey?y/percent+ow:ow;
img.style.width=x+'px';
img.style.height=oh+y+'px';
if(chrPosY)img.style.top=oy-y+'px';
break;
case 'cnwr':
case 'cner':
x=chrPosX?-x:x;
if(e.ctrlKey){//按宽等比
y=e.ctrlKey?percent*x+oh:oh;
img.style.width=ow+x+'px';
img.style.height=y+'px';
if(chrPosX)img.style.left=ox-x+'px';
}
else{
y=chrPosY?-y:y;
img.style.width=ow+x+'px';
img.style.height=oh+y+'px';
if(chrPosX)img.style.left=ox-x+'px';
if(chrPosY)img.style.top=oy-y+'px';
}
break;
}
}
}
img.onmousemove=mouseMove;
img.onmousedown=mouseDown;
document.onmouseup=function(){
if(typeof isDrag=="boolean"){
if(isIE)img.releaseCapture();//函数的作用就是将后续的mouse事件都发送给这个对象
}
isDrag=null;
img.className='cdft';
img.onmousemove=mouseMove;
document.onmousemove=null;
}
</script>

[筱筱菜]

@丰云 当在vue项目里怎么写呀 大佬

[丰云]

参考我的博客：

[丰云]

参考我的博客

[随_声]

引用 3 楼 丰云 的回复:

参考我的博客

可是，我把复制拖动到div写出来了，但，大佬知不知道怎么写把复制的图片进行放大缩小，我上面的那个代码可以放大缩小，但是只能一张图片可以，怎么把所有复制过去的图片进行放大缩小，

[随_声]

我这个整个共能是连带的，所以好麻烦，我是个新手，只能先一个一个小功能写，， 我整个功能，不知道那位大佬好心写一下，如果觉得无聊你们练练手也许。就是。有一个网格，要输入的数字进行判断有几行几列，而且自己判断格子的平均大小，只能在一个div中，然后下面有一个轮播图，可以把轮播图中的图片进行复制到div网格中，然后有个开关按钮进行判断，开的话就是把复制进去的网格进行放大缩小，还有一个就是判断关，关的话就是把拖进去的图片只能放到格子中，可以一张图站四个格子，不能只显示半格，但都能拖动大小。

[随_声]

大佬，怎么写啊，我找了好久都没找到解决方法，你有什么比较好的解决方法吗？