4

Estou desenvolvendo o seguinte código, para criar uma área de seleção de elementos usando o mouse.

var draggingMouse = false;
var leftMouseDrag, topMouseDrag;
$(document).on("mousedown mouseup", "#cloud_main_page", function(e){	
	if (e.type == "mousedown") {
		draggingMouse = true;
		var offset = $(this).offset();
		
		leftMouseDrag = e.pageX - offset.left;
		topMouseDrag = e.pageY - offset.top
		
		$("#cloud_main_page .cloud_mouse_selection").css({"top": topMouseDrag, "left" : leftMouseDrag});
			
	} else{
		draggingMouse = false;	
		$("#cloud_main_page .cloud_mouse_selection").removeAttr("style");
	}
		
}).on("mousemove", "#cloud_main_page", function(e){
	if(draggingMouse){
		var offsetDrag = $("#cloud_main_page .cloud_mouse_selection").offset();
			
		var top = e.pageY - offsetDrag.top;
		var left = e.pageX - offsetDrag.left;
      
		var width = Math.abs(left);
		var height = Math.abs(top);
			
		$("#cloud_main_page .cloud_mouse_selection").css({"width": width, "height": height});
	}
});
#cloud_main_page{
  width:400px;
  height:400px;
  
  position:relative;
}
#cloud_main_page .cloud_mouse_selection{	
	position:absolute;
	
	background-color:rgba(6, 217, 160, 0.05);
	border: 1px solid rgba(6, 217, 160, 0.3);	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cloud_main_page">
  <div class="cloud_mouse_selection"></div>
</div>

Funciona bem, desde que o usuário arraste o mouse só da Esquerda para Direita e de cima para baixo, e este obviamente não será sempre o mesmo cenário... Então, como eu poderia fazer caso o usuário decida arrastar o mouse em direções diferentes?

1 Resposta 1

0

Seu erro aqui está em sempre setar as propriedades top e left no mousedown e não alterar depois, como não existe tamanho negativo, você não conseguiria fazer a caixa ir pra cima ou pra esquerda da posição inicial.

A solução para o seu problema é simples, basta setar o left e top dinâmicamente considerando se as coordenadas X e Y do mouse atualmente são maiores ou menores do que no evento mousedown, neste evento apenas salvamos as coordenadas iniciais. Tratamos separadamente X e Y, pois o x inicial pode ser maior que o atual enquanto o y atual é maior que o inicial.

Tendo essas informações, width e height sempre serão a distância do ponto inicial até a posição atual do mouse, no entanto left e top deverão ser quem tem as coordenadas MENORES, neste caso sendo setadas por uma operação ternária.

let draggingMouse = false;
let leftMouseDrag, topMouseDrag;
let startPosition;

$(document).on("mousedown mouseup", "#cloud_main_page", function(e) {
  if (e.type == "mousedown") {
    draggingMouse = true;
    var offset = $(this).offset();

    startPosition = {
      x: e.pageX - offset.left,
      y: e.pageY - offset.top
    }


  } else {
    draggingMouse = false;
    $("#cloud_main_page .cloud_mouse_selection").removeAttr("style");
  }

}).on("mousemove", "#cloud_main_page", function(e) {
  if (draggingMouse) {
    var offset = $(this).offset();

    const actualPosition = {
      x: e.pageX - offset.left,
      y: e.pageY - offset.top
    }

    const width = Math.abs(actualPosition.x - startPosition.x);
    const height = Math.abs(actualPosition.y - startPosition.y);

    $("#cloud_main_page .cloud_mouse_selection").css({
      "width": width,
      "left": actualPosition.x > startPosition.x ? startPosition.x : actualPosition.x
    })

    $("#cloud_main_page .cloud_mouse_selection").css({
      "height": height,
      "top": actualPosition.y > startPosition.y ? startPosition.y : actualPosition.y
    })

  }
});
#cloud_main_page {
  width: 400px;
  height: 400px;
  position: relative;
  background: #eee;
}

#cloud_main_page .cloud_mouse_selection {
  position: absolute;
  background-color: rgba(6, 217, 160, 0.05);
  border: 1px solid rgba(6, 217, 160, 0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cloud_main_page">
  <div class="cloud_mouse_selection"></div>
</div>

1
  • Esse código ainda é passível de melhoras, no entanto me limitei em responder a pergunta, caso queira ajuda extra em qualquer momento, meu contato está no meu portfolio Commented 6/01/2021 às 11:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .