如何限制div内的图片拖动？

Question

我附上了片段，其中我有一个在 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>

Answer 1

您可以尝试一个简单的css修复方法，但我不确定它的跨浏览器兼容性。将.item img位置更改为sticky。window.repositionImage = function(event){var element = document.getElementById('img');&nbsp;&nbsp;&nbsp; element.addEventListener('mousedown', function(e){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; element.style.cursor = "grabbing";&nbsp; &nbsp; if (e.target != element) return;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var offsetX = e.pageX - element.offsetLeft;&nbsp; &nbsp; var offsetY = e.pageY - element.offsetTop;&nbsp;&nbsp;&nbsp; &nbsp; var move = function(e){&nbsp; &nbsp; &nbsp;element.style.left = e.pageX - offsetX + "px";&nbsp; &nbsp; &nbsp;element.style.top = e.pageY - offsetY + "px";&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var stop = function(){&nbsp; &nbsp; &nbsp; element.style.cursor = "default";&nbsp; &nbsp; &nbsp; document.removeEventListener("mousemove", move);&nbsp; &nbsp; &nbsp; document.removeEventListener("mouseup", stop);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.addEventListener("mousemove", move);&nbsp; &nbsp; document.addEventListener("mouseup", stop);&nbsp; &nbsp;})&nbsp;}window.panChangeHandler = function(e){&nbsp; var element = document.getElementById('img');&nbsp; img.style.transform = `scale(1.${e.target.value})`;}document.getElementById("img").disabled = true;.item {&nbsp; border: 1px solid;&nbsp; background: red;&nbsp; width: 300px;&nbsp; height: 300px;&nbsp; overflow: hidden;&nbsp; position:relative;}.item img {&nbsp; position: sticky;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; -webkit-user-drag: none;&nbsp; left:0;&nbsp; top:0;}.slider {&nbsp; z-index: 9;&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; margin-left: -20px;&nbsp; margin-top: 70px;&nbsp; writing-mode: bt-lr; /* IE */&nbsp; -webkit-appearance: slider-vertical; /* WebKit */&nbsp; transform: rotateZ(270deg);}.slider input {&nbsp; width: 80px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class='item'>&nbsp; <span class='slider'>&nbsp; &nbsp; <input type='range' aria-orientation="vertical"&nbsp; &nbsp; &nbsp; value="0"&nbsp; min="0" max="9"&nbsp; step="1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;oninput="panChangeHandler(event)"&nbsp; &nbsp; />&nbsp; </span>&nbsp; <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>

Answer 2

我设法解决了这个问题：function parseComplexStyleProperty(str) {&nbsp; &nbsp; &nbsp; &nbsp; var regex = /(\w+)\((.+?)\)/g,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform = {},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; match;&nbsp; &nbsp; &nbsp; &nbsp; while ((match = regex.exec(str))) transform[match[1]] = match[2];&nbsp; &nbsp; &nbsp; &nbsp; return transform;&nbsp; &nbsp; };window.repositionImage = function(event){var element = document.getElementById('img');&nbsp;&nbsp;&nbsp; element.addEventListener('mousedown', function(e){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; element.style.cursor = "grabbing";&nbsp; &nbsp; if (e.target != element) return;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var offsetX = e.pageX - element.offsetLeft;&nbsp; &nbsp; var offsetY = e.pageY - element.offsetTop;&nbsp; &nbsp; &nbsp; var x = 0;&nbsp; &nbsp; var y = 0;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var move = function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x = e.pageX - offsetX;&nbsp; &nbsp; &nbsp; y = e.pageY - offsetY;&nbsp; &nbsp; &nbsp;element.style.left = e.pageX - offsetX + "px";&nbsp; &nbsp; &nbsp;element.style.top = e.pageY - offsetY + "px";&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var stop = function(){&nbsp; &nbsp; &nbsp; element.style.cursor = "default";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var t = parseComplexStyleProperty(element.style.transform);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;if (!Object.keys(t).length) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.style.left = "0px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.style.top = "0px";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var imageWidth = element.clientWidth * parseFloat(t.scale);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var imageHeight =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.clientHeight * parseFloat(t.scale);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var pointToSubX = Math.trunc(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (imageWidth - parent.clientWidth) / 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var pointToSubY = Math.trunc(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (imageHeight - parent.clientHeight) / 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (x > pointToSubX || x < -pointToSubX) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (x > pointToSubX)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.style.left = pointToSubX + "px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else element.style.left = -pointToSubX + "px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (y > pointToSubY || y < -pointToSubY) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (y > pointToSubY)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.style.top = pointToSubY + "px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else element.style.top = -pointToSubY + "px";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; document.removeEventListener("mousemove", move);&nbsp; &nbsp; &nbsp; document.removeEventListener("mouseup", stop);&nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.addEventListener("mousemove", move);&nbsp; &nbsp; document.addEventListener("mouseup", stop);&nbsp; &nbsp;})&nbsp;}window.panChangeHandler = function(e){&nbsp; var element = document.getElementById('img');&nbsp; img.style.transform = `scale(1.${e.target.value})`;}document.getElementById("img").disabled = true;.item {&nbsp; &nbsp; &nbsp;margin-right: 1px;&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; background: white;&nbsp; &nbsp; overflow: hidden;&nbsp; position: relative;}.item img {transform: scale(1);position: relative;&nbsp; &nbsp; background-color: #eee;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; -webkit-user-drag: none;&nbsp; left:0;&nbsp; top:0;}.slider {&nbsp; z-index: 9;&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; margin-left: -20px;&nbsp; margin-top: 70px;&nbsp; writing-mode: bt-lr; /* IE */&nbsp; -webkit-appearance: slider-vertical; /* WebKit */&nbsp; transform: rotateZ(270deg);}.slider input {&nbsp; width: 80px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class='item'>&nbsp; <span class='slider'>&nbsp; &nbsp; <input type='range' aria-orientation="vertical"&nbsp; &nbsp; &nbsp; value="0"&nbsp; min="0" max="9"&nbsp; step="1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;oninput="panChangeHandler(event)"&nbsp; &nbsp; />&nbsp; </span>&nbsp; <img id='img' src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&w=1000&q=80" alt='image'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;onmouseover="repositionImage(event)" /></div>

Answer 3

查看if&nbsp;(e.target.tagName&nbsp;==&nbsp;"DIV"&nbsp;)&nbsp;return;发生掉落事件时