Почему курсор меняет положение после щелчка? - PullRequest
Новая
       73

Почему курсор меняет положение после щелчка?

0 голосов
/ 22 марта 2020

1. Если я добавлю поле 100px к контейнеру div, то нажатие на «resizer» переместит курсор на 100px. Я решил это с дополнительными - 100px:

document.getElementById ("dragdiv"). style.left = original_x + (e.pageX - original_mouse_x) - 100 + 'px';

Как это сделать без добавления -100?

2. Если я добавлю масштаб (1.5, 1.5) к контейнеру div, это также произойдет, но курсор переместится не из «resizer» на 100px, а по-другому.

Как это можно решить, не изменяя положение курсора, изменяя поля и масштаб контейнера после нажатия на кнопку «resizer»? 

    // DRAG ELEMENT //
   window.addEventListener('mouseup', mouseUpDragElement, false);
   document.getElementById("dragdiv").addEventListener('mousedown', mouseDownDragElement, false);
   document.getElementById("dragdiv").addEventListener('mousedown', mouseDownResizeElement, false);
 
   var elementdragTop ;
   var elementdragLeft ;
   var  original_width  ;
   var  original_height  ;
   var  original_x  ;
   var  original_y  ;
   var  original_mouse_x  ;
   var original_mouse_y  ;   
   
   function mouseDownDragElement(e) {
   window.addEventListener("mousemove", myFunctionDragElement, true);
   elementdragTop = e.clientX - document.getElementById("dragdiv").offsetLeft ;
   elementdragLeft = e.clientY - document.getElementById("dragdiv").offsetTop ;
   }

   function mouseUpDragElement() {
   window.removeEventListener("mousemove", myFunctionDragElement, true);
   }

   function myFunctionDragElement(e) {

   var x = e.clientX;
   var y = e.clientY;

   document.getElementById("dragdiv").style.position = "absolute";
   document.getElementById("dragdiv").style.left = (x - elementdragTop) + 'px'; 
   document.getElementById("dragdiv").style.top = (y - elementdragLeft) + 'px';
   
   }
   
   // ADD RESIZER
   
   function mouseDownResizeElement(e) {
   var resizertopleft = document.createElement("DIV");   
   resizertopleft.id = "resizer-top-left"; 
   resizertopleft.addEventListener('mousedown', mouseDownResizeElementResizerTopLeft, false);   
   document.getElementById("dragdiv").appendChild(resizertopleft);
   

   }
   
   
    // RESAZE BUTTON TOP LEFT
   
   function mouseDownResizeElementResizerTopLeft(e) {
		  window.addEventListener("mousemove", mouseMoveResizeElementResizerTopLeft, true);
          document.getElementById("dragdiv").addEventListener('mouseup', mouseUpResizeElementResizerTopLeft, true);
		  
		 original_width = parseFloat(getComputedStyle(document.getElementById("dragdiv"), null).getPropertyValue('width').replace('px', ''));
         original_height = parseFloat(getComputedStyle(document.getElementById("dragdiv"), null).getPropertyValue('height').replace('px', ''));
         original_x = document.getElementById("dragdiv").getBoundingClientRect().left;
         original_y = document.getElementById("dragdiv").getBoundingClientRect().top;
		 original_b = document.getElementById("dragdiv").getBoundingClientRect().bottom;
         original_mouse_x = e.pageX;
         original_mouse_y = e.pageY;

	      
   }
   function mouseMoveResizeElementResizerTopLeft(e) {
             document.getElementById("dragdiv").addEventListener('mouseup', mouseUpResizeElementResizerTopLeft, true);
             window.removeEventListener("mousemove", myFunctionDragElement, true);
			 
			 var width = original_width - (e.pageX - original_mouse_x);
             var height = original_height - (e.pageY - original_mouse_y);
			 
			 var conw = document.getElementById("container").width / 1.5;    // I tried to get width and height from the container here and divide by scale, but it doesn't work.
		     var conh = document.getElementById("container").height / 1.5;
			 
			 
			 document.getElementById("dragdiv").style.width = width + 'px';
             document.getElementById("dragdiv").style.left = original_x + (e.pageX - original_mouse_x) - 100 + 'px'; // Here i add -100
			 document.getElementById("dragdiv").style.height = height + 'px'
             document.getElementById("dragdiv").style.top = original_y + (e.pageY - original_mouse_y) - 100 + 'px'
               
	}
	function mouseUpResizeElementResizerTopLeft() {
		  window.removeEventListener("mousemove", mouseMoveResizeElementResizerTopLeft, true);
          
	   
   }
#container {
  width: 900px;
  height: 500px;
  background-color: blue;
  position: absolute;
  margin: 100px;
transform: scale(1.5, 1.5);
}

#dragdiv {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  margin: 0px;
}

#resizer-top-left{
  width: 7px;
  height: 7px;
  border-radius: 0%;
  background: transparent;
  border: 1px solid #4286f4;
  position: absolute;
  left: -4px;
  top: -4px;
  cursor: nwse-resize;
}
<div id="container">
    <div id="dragdiv"></div>
</div>
...