创建鼠标选择框

时间:2018-05-28 20:12:35

标签: javascript jquery html css

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

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>

它运行良好,因为用户只是从左到右,从上到下拖动...所以我想改进它,以某种方式,无论用户拖动鼠标的方向,该框将按照它,我该怎么做?

1 个答案:

答案 0 :(得分:1)

由于您不能有负宽度/高度,您需要更改框的原点。

你可以通过改变宽度和高度来改变css来做到这一点。

对于每个方向,如果差异<&lt; 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;

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

以下是修改后的代码段:

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 - topMouseDrag;
            var left = e.pageX - leftMouseDrag;

            var width = Math.abs(left);
            var height = Math.abs(top);

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

            if(left < 0){
                $("#cloud_main_page .cloud_mouse_selection").css({"left": e.pageX});
            }else{
                $("#cloud_main_page .cloud_mouse_selection").css({"left": leftMouseDrag});
            }


        $("#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>