创建鼠标选择框

Question

我编写以下代码，并尝试在用户单击并拖动鼠标时创建一个选择框

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>

它工作得很好，因为用户只从左到右、从上到下拖动...所以我想改进它，使得无论用户向哪个方向拖动鼠标，框都会跟随它，我怎样才能做到这一点？

Answer 1

由于宽度/高度不能为负，因此需要更改框的原点。

您可以通过更改 css 来实现这一点，就像更改宽度和高度一样。

对于每个方向，如果差值 < 0，则要将框的位置设置为鼠标位置。
就像是：

if(top < 0){
    $("#cloud_main_page .cloud_mouse_selection").css({"top": e.pageY});
}else{
    $("#cloud_main_page .cloud_mouse_selection").css({"top": topMouseDrag});
}
//same for left

现在，如果您只更改它，就会遇到问题，因为您使用的是框的偏移量，而不是拖动开始的原点位置。您可以通过更改来解决此问题

var top = e.pageY - offsetDrag.top;

到

var top = e.pageY - topMouseDrag;

这样，宽度和高度将始终从拖动的原点计算。

这是经过修改的代码片段：

if(top < 0){
    $("#cloud_main_page .cloud_mouse_selection").css({"top": e.pageY});
}else{
    $("#cloud_main_page .cloud_mouse_selection").css({"top": topMouseDrag});
}
//same for left

var top = e.pageY - offsetDrag.top;

var top = e.pageY - topMouseDrag;