Как ограничить перетаскивание изображения внутри 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})`;
}

.item {
  border: 1px solid;
  background: red;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position:relative;
}

.item img {
  position:absolute;
  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;
}

Answer 1

Существует простое исправление 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;
}

Answer 2

Проверка

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

Событие сброса