1)情况:最近写了一个类似window界面,鼠标左击按下(不放开),然后移动,会出现一个方框的效果(如图一),然后选中虚线框中的td(其实就是td颜色改变),这里的内容,看似简单,但是对于一个我这个前端菜鸡的后端来说,简直就是噩梦,因为需要兼容谷歌,IE11和IE8。。。,好了,实际效果图(如图二,由于系统太旧,前端界面比较丑,不用在意,看思路就好)
2)实现效果:
图一:
图二:(虚线框,画框)
图三(框选中多个td,并且让其高亮显示,然后将选择的面板显示出来)
图四(点击选中单个td,并让其高亮显示,然后将选择的面板显示出来)
3)思路描述:
3.1)其实这里之所以可以操作,关键点在于,可操作的td之上,覆盖了一层遮罩层画板div(如图五);
图五:(这个可以通过设置div颜色,在调试其位置时比较直观,而实际使用时,即通过透明度来使其隐藏起来,就像一个透明的遮罩层,然后我们通过绑定鼠标点击、鼠标移动、鼠标松开事件,实现具体的逻辑)
3.2)遮罩层位置和大小的设置
情况1:数据比较少(即,不会出现页面滚动效果的页面,相对直观简单,如图六),这图的条件是,A、B、C三点坐标都是正数,那么如图,