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?