我附上了片段，其中我有一个在 div 内可拖动和缩放的图像。但是有一个问题，当从左向右移动图像时，如果图像的角与父级的 X 和 Y 的角相交，则图像应该无法移动。我实际上想知道图像的角何时与父级相交div 角，因为我不想在满足此条件时允许拖动。拖动图像时，背景红色不应可见。window.repositionImage = function(event){var element = document.getElementById('img'); element.addEventListener('mousedown', function(e){ e.stopPropagation(); element.style.cursor = "grabbing"; if (e.target != element) return; var offsetX = e.pageX - element.offsetLeft; var offsetY = e.pageY - element.offsetTop; var move = function(e){ element.style.left = e.pageX - offsetX + "px"; element.style.top = e.pageY - offsetY + "px"; } var stop = function(){ element.style.cursor = "default"; document.removeEventListener("mousemove", move); document.removeEventListener("mouseup", stop); } document.addEventListener("mousemove", move); document.addEventListener("mouseup", stop); }) }window.panChangeHandler = function(e){ var element = document.getElementById('img'); if (e.target.value == 0) { element.style.left = "0px"; element.style.top = "0px"; } img.style.transform = `scale(1.${e.target.value})`;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class='item'> <span class='slider'> <input type='range' aria-orientation="vertical" value="0" min="0" max="9" step="1" oninput="panChangeHandler(event)" /> </span> <img id='img' src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80" alt='image' onmouseover="repositionImage(event)" /></div>
3 回答
慕妹3146593
TA贡献1820条经验 获得超9个赞
您可以尝试一个简单的css修复方法，但我不确定它的跨浏览器兼容性。将.item img位置更改为sticky。
window.repositionImage = function(event){
var element = document.getElementById('img');
element.addEventListener('mousedown', function(e){
e.stopPropagation();
element.style.cursor = "grabbing";
if (e.target != element) return;
var offsetX = e.pageX - element.offsetLeft;
var offsetY = e.pageY - element.offsetTop;
var move = function(e){
element.style.left = e.pageX - offsetX + "px";
element.style.top = e.pageY - offsetY + "px";
}
var stop = function(){
element.style.cursor = "default";
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", stop);
}
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", stop);
})
}
window.panChangeHandler = function(e){
var element = document.getElementById('img');
img.style.transform = `scale(1.${e.target.value})`;
}
document.getElementById("img").disabled = true;
.item {
border: 1px solid;
background: red;
width: 300px;
height: 300px;
overflow: hidden;
position:relative;
}
.item img {
position: sticky;
width: 100%;
height: 100%;
-webkit-user-drag: none;
left:0;
top:0;
}
.slider {
z-index: 9;
position: absolute;
left: 0;
top: 0;
margin-left: -20px;
margin-top: 70px;
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
transform: rotateZ(270deg);
}
.slider input {
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='item'>
<span class='slider'>
<input type='range' aria-orientation="vertical"
value="0" min="0" max="9" step="1" oninput="panChangeHandler(event)"
/>
</span>
<img id='img' src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80" alt='image' onmouseover="repositionImage(event)" />
</div>
SMILET
TA贡献1796条经验 获得超4个赞
我设法解决了这个问题：
function parseComplexStyleProperty(str) {
var regex = /(\w+)\((.+?)\)/g,
transform = {},
match;
while ((match = regex.exec(str))) transform[match[1]] = match[2];
return transform;
};
window.repositionImage = function(event){
var element = document.getElementById('img');
element.addEventListener('mousedown', function(e){
e.stopPropagation();
element.style.cursor = "grabbing";
if (e.target != element) return;
var offsetX = e.pageX - element.offsetLeft;
var offsetY = e.pageY - element.offsetTop;
var x = 0;
var y = 0;
var move = function(e){
x = e.pageX - offsetX;
y = e.pageY - offsetY;
element.style.left = e.pageX - offsetX + "px";
element.style.top = e.pageY - offsetY + "px";
}
var stop = function(){
element.style.cursor = "default";
var t = parseComplexStyleProperty(element.style.transform);
if (!Object.keys(t).length) {
element.style.left = "0px";
element.style.top = "0px";
}
else {
var imageWidth = element.clientWidth * parseFloat(t.scale);
var imageHeight =
element.clientHeight * parseFloat(t.scale);
var pointToSubX = Math.trunc(
(imageWidth - parent.clientWidth) / 2
);
var pointToSubY = Math.trunc(
(imageHeight - parent.clientHeight) / 2
);
if (x > pointToSubX || x < -pointToSubX) {
if (x > pointToSubX)
element.style.left = pointToSubX + "px";
else element.style.left = -pointToSubX + "px";
}
if (y > pointToSubY || y < -pointToSubY) {
if (y > pointToSubY)
element.style.top = pointToSubY + "px";
else element.style.top = -pointToSubY + "px";
}
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", stop);
}
}
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", stop);
})
}
window.panChangeHandler = function(e){
var element = document.getElementById('img');
img.style.transform = `scale(1.${e.target.value})`;
}
document.getElementById("img").disabled = true;
.item {
margin-right: 1px;
height: 200px;
background: white;
overflow: hidden;
position: relative;
}
.item img {
transform: scale(1);
position: relative;
background-color: #eee;
width: 100%;
height: 100%;
-webkit-user-drag: none;
left:0;
top:0;
}
.slider {
z-index: 9;
position: absolute;
left: 0;
top: 0;
margin-left: -20px;
margin-top: 70px;
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
transform: rotateZ(270deg);
}
.slider input {
width: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='item'>
<span class='slider'>
<input type='range' aria-orientation="vertical"
value="0" min="0" max="9" step="1" oninput="panChangeHandler(event)"
/>
</span>
<img id='img' src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80" alt='image'
onmouseover="repositionImage(event)" />
</div>
- 3 回答
- 0 关注
- 45 浏览
添加回答
举报
0/150
提交
取消