使用div创建选取框

使用div实现了选取框效果.

代码如下

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>myCanvasTest</title>
  5     <style type="text/css">
  6         #selection{
  7             border: 3px red solid;
  8             display: none;
  9             position: absolute;
 10         }
 11         *{
 12             cursor: crosshair;
 13         }
 14     </style>
 15 </head>
 16 <body>
 17     <div id="selection"></div>
 18 </body>
 19 <script type="text/javascript">
 20     var selection,                                                    //存储坐标量(方便用)
 21         flag             = false,                                    //作为是否在鼠标点击时的移动标记
 22         selectionDiv     = document.getElementById("selection");        //获取选取框div对象
 23 
 24     //初始化坐标对象
 25     function init () {
 26          selection = {
 27             top        :0,
 28             left    :0,
 29             width    :0,
 30             height    :0
 31         };
 32     }
 33 
 34     //鼠标按下,记录坐标
 35     function setLocation (x, y) {
 36         selection.left = x;
 37         selection.top = y;
 38     }
 39 
 40     //鼠标移动计算距离存入宽高
 41     function moveLocation (x, y) {
 42         selection.width = selection.left - x;
 43         selection.height = selection.top - y;
 44         moveIt();                
 45     }
 46 
 47     //更新div坐标尺寸信息
 48     function moveIt () {
 49         console.log(selection);
 50         //高度宽度小于0时说明拖拽x,y为正值,如小于0说明拖动为反方向.需重新计算top及left保证拖拽效果
 51         selectionDiv.style.top         = (selection.height < 0 ? 
 52                                         selection.top :                     
 53                                         selection.top - selection.height) 
 54                                     + "px";
 55         selectionDiv.style.left     = (selection.width < 0 ? 
 56                                         selection.left : 
 57                                         selection.left - selection.width) 
 58                                     + "px";
 59         //Math.abs()方法返回绝对值
 60         selectionDiv.style.width     = Math.abs(selection.width) 
 61                                     + "px";
 62         selectionDiv.style.height     = Math.abs(selection.height) 
 63                                     + "px";
 64     }
 65 
 66     //显示选取框div
 67     function showIt () {
 68         selectionDiv.style.display = "block";
 69     }
 70 
 71     //隐藏选取框div
 72     function hideIt () {
 73         selectionDiv.style.display = "none";
 74     }
 75 
 76     //鼠标按下触发事件
 77     window.onmousedown = function (e) {
 78         var x = e.clientX,
 79             y = e.clientY;
 80         //初始化坐标对象
 81         init();
 82         //显示div对象
 83         showIt();
 84         //设置top,left值.作为本次拖拽的原点
 85         setLocation(x, y);
 86         //调用移动方法
 87         moveIt();
 88         //将标记打开
 89         flag = true;
 90     }
 91 
 92     //鼠标移动时触发
 93     window.onmousemove = function (e) {
 94         var x = e.clientX,
 95             y = e.clientY;
 96         //当标记开启时,触发事件
 97         if(flag)
 98             moveLocation(x, y);
 99     }
100 
101     //鼠标抬起,触发事件,将div隐藏,清除坐标对象,关闭标记
102     window.onmouseup = function (e) {
103         //隐藏div
104         hideIt();
105         //清除坐标信息
106         init();
107         //关闭标记
108         flag = false;
109     }
110 
111 </script>
112 </html>

感觉在编码的时候.卡在了x,y都为负值的地方.

为了保证在x,y都为负值时还有拖拽效果.必须要将div的位置移动.

看起来就像拖拽一样.实则在更新大小的同时更新了div的坐标位置

上一篇:silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)


下一篇:[MVC4]ASP.NET MVC4+EF5(Lambda/Linq)读取数据