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来做到这一点。

对于每个方向，如果差异<＆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>

创建鼠标选择框

1 个答案: