Javascript 如何限制在div内拖动图像？

我附加了一个片段，其中有一个图像可以在div中拖动和缩放。但有一个问题，当从左向右移动图像时，如果图像的角点在X和Y上都与父对象的角点相交，它应该无法移动。我实际上想知道图像的角点何时与父对象的div角点相交，因为我不想在满足此条件时允许拖动。拖动图像时，背景红色不应可见

window.image=函数（事件）{
var元素=document.getElementById（'img'）；
元素。addEventListener（'mousedown'，函数（e）{
e、 停止传播（）；
element.style.cursor=“抓取”；
如果（e.target！=元素）返回；
var offsetX=e.pageX-element.offsetLeft；
var offsetY=e.pageY-element.offsetTop；
变量移动=函数（e）{
element.style.left=e.pageX-offsetX+“px”；
element.style.top=e.pageY-offsetY+“px”；
}
var stop=函数（）{
element.style.cursor=“默认”；
document.removeEventListener（“mousemove”，move）；
文件。删除EventListener（“mouseup”，停止）；
}
文件。添加的文件列表（“mousemove”，move）；
文件。添加文件列表器（“鼠标”，停止）；
}) 
}
window.panChangeHandler=函数（e）{
var元素=document.getElementById（'img'）；
如果（e.target.value==0）{
element.style.left=“0px”；
element.style.top=“0px”；
}
img.style.transform=`scale（1.${e.target.value}）`；
}

.item{
边框：1px实心；
背景：红色；
宽度：300px；
高度：300px；
溢出：隐藏；
位置：相对位置；
}
.项目img{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit用户拖动：无；
左：0；
排名：0；
}
.滑块{
z指数：9；
位置：绝对位置；
左：0；
排名：0；
左边距：-20px；
利润上限：70像素；
写入模式：bt lr；/*IE*/
-webkit外观：滑块垂直；/*webkit*/
变换：旋转（270度）；
}
.滑块输入{
宽度：80px；
}

检查

if (e.target.tagName == "DIV" ) return;

---

在drop事件中，有一个简单的

css

修复程序，您可以尝试，但我不确定它是否兼容交叉浏览器。将

.item img

位置更改为

sticky

window.image=函数（事件）{
var元素=document.getElementById（'img'）；
元素。addEventListener（'mousedown'，函数（e）{
e、 停止传播（）；
element.style.cursor=“抓取”；
如果（e.target！=元素）返回；
var offsetX=e.pageX-element.offsetLeft；
var offsetY=e.pageY-element.offsetTop；
变量移动=函数（e）{
element.style.left=e.pageX-offsetX+“px”；
element.style.top=e.pageY-offsetY+“px”；
}
var stop=函数（）{
element.style.cursor=“默认”；
document.removeEventListener（“mousemove”，move）；
文件。删除EventListener（“mouseup”，停止）；
}
文件。添加的文件列表（“mousemove”，move）；
文件。添加文件列表器（“鼠标”，停止）；
}) 
}
window.panChangeHandler=函数（e）{
var元素=document.getElementById（'img'）；
img.style.transform=`scale（1.${e.target.value}）`；
}
document.getElementById（“img”）.disabled=true
.item{
边框：1px实心；
背景：红色；
宽度：300px；
高度：300px；
溢出：隐藏；
位置：相对位置；
}
.项目img{
位置：粘性；
宽度：100%；
身高：100%；
-webkit用户拖动：无；
左：0；
排名：0；
}
.滑块{
z指数：9；
位置：绝对位置；
左：0；
排名：0；
左边距：-20px；
利润上限：70像素；
写入模式：bt lr；/*IE*/
-webkit外观：滑块垂直；/*webkit*/
变换：旋转（270度）；
}
.滑块输入{
宽度：80px；
}
我设法解决了这个问题：


函数parseComplexStyleProperty（str）{
变量正则表达式=/（\w+）\（.+？）\）/g，
transform={}，
匹配；
而（（match=regex.exec（str）））transform[match[1]]=match[2]；
回归变换；
};
window.image=函数（事件）{
var元素=document.getElementById（'img'）；
元素。addEventListener（'mousedown'，函数（e）{
e、 停止传播（）；
element.style.cursor=“抓取”；
如果（e.target！=元素）返回；
var offsetX=e.pageX-element.offsetLeft；
var offsetY=e.pageY-element.offsetTop；
var x=0；
var y=0；
变量移动=函数（e）{
x=e.pageX-抵销x；
y=e.pageY-偏移；
element.style.left=e.pageX-offsetX+“px”；
element.style.top=e.pageY-offsetY+“px”；
}
var stop=函数（）{
element.style.cursor=“默认”；
var t=parseComplexStyleProperty（element.style.transform）；
if（！Object.keys（t）.length）{
element.style.left=“0px”；
element.style.top=“0px”；
}
否则{
var imageWidth=element.clientWidth*parseFloat（t.scale）；
var成像高度=
element.clientHeight*parseFloat（t.scale）；
var pointToSubX=Math.trunc(
（imageWidth-parent.clientWidth）/2
);
var pointToSubY=Math.trunc(
（imageHeight-父客户端高度）/2
);
如果（x>pointToSubX | | x<-pointToSubX）{
如果（x>pointToSubX）
element.style.left=指向subx+“px”；
else element.style.left=-pointToSubX+“px”；
}
if（y>pointToSubY | | y<-pointToSubY）{
如果（y>指向SubY）
element.style.top=pointToSubY+“px”；
else element.style.top=-pointToSubY+“px”；
}
document.removeEventListener（“mousemove”，move）；
文件。删除EventListener（“mouseup”，停止）；
}
}
文件。添加的文件列表（“mousemove”，move）；
做