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

代码如下

 <!DOCTYPE html>

 <html>

 <head>

     <title>myCanvasTest</title>

     <style type="text/css">

         #selection{

             border: 3px red solid;

             display: none;

             position: absolute;

         }

         *{

             cursor: crosshair;

         }

     </style>

 </head>

 <body>

     <div id="selection"></div>

 </body>

 <script type="text/javascript">

     var selection,                                                    //存储坐标量(方便用)

         flag             = false,                                    //作为是否在鼠标点击时的移动标记

         selectionDiv     = document.getElementById("selection");        //获取选取框div对象

     //初始化坐标对象

     function init () {

          selection = {

             top        :0,

             left    :0,

             width    :0,

             height    :0

         };

     }

     //鼠标按下,记录坐标

     function setLocation (x, y) {

         selection.left = x;

         selection.top = y;

     }

     //鼠标移动计算距离存入宽高

     function moveLocation (x, y) {

         selection.width = selection.left - x;

         selection.height = selection.top - y;

         moveIt();

     }

     //更新div坐标尺寸信息

     function moveIt () {

         console.log(selection);

         //高度宽度小于0时说明拖拽x,y为正值,如小于0说明拖动为反方向.需重新计算top及left保证拖拽效果

         selectionDiv.style.top         = (selection.height < 0 ?

                                         selection.top :

                                         selection.top - selection.height)

                                     + "px";

         selectionDiv.style.left     = (selection.width < 0 ?

                                         selection.left :

                                         selection.left - selection.width)

                                     + "px";

         //Math.abs()方法返回绝对值

         selectionDiv.style.width     = Math.abs(selection.width)

                                     + "px";

         selectionDiv.style.height     = Math.abs(selection.height)

                                     + "px";

     }

     //显示选取框div

     function showIt () {

         selectionDiv.style.display = "block";

     }

     //隐藏选取框div

     function hideIt () {

         selectionDiv.style.display = "none";

     }

     //鼠标按下触发事件

     window.onmousedown = function (e) {

         var x = e.clientX,

             y = e.clientY;

         //初始化坐标对象

         init();

         //显示div对象

         showIt();

         //设置top,left值.作为本次拖拽的原点

         setLocation(x, y);

         //调用移动方法

         moveIt();

         //将标记打开

         flag = true;

     }

     //鼠标移动时触发

     window.onmousemove = function (e) {

         var x = e.clientX,

             y = e.clientY;

         //当标记开启时,触发事件

         if(flag)

             moveLocation(x, y);

     }

     //鼠标抬起,触发事件,将div隐藏,清除坐标对象,关闭标记

     window.onmouseup = function (e) {

         //隐藏div

         hideIt();

         //清除坐标信息

         init();

         //关闭标记

         flag = false;

     }

 </script>

 </html>

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

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

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

使用div创建选取框的更多相关文章

  1. HTML创建文本框的3种方式

    我的第一个随笔,记录主要用来整理学习的知识点 1.input 创建单行文本框 <input type="text" size="10" maxlength ...

  2. Python测试开发-创建模态框及保存数据

    Python测试开发-创建模态框及保存数据 原创: fin  测试开发社区  前天 什么是模态框? 模态框是指的在覆盖在父窗体上的子窗体.可用来做交互,我们经常会看到模态框用来登录.确定等等,到底是怎 ...

  3. easyUI draggable插件使用不当，导致拖动div内部文本框无法输入；设置echarts数据为空时就显示空白，不要动画和文字

    先上一个Demo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww ...

  4. DIV+CSS区块框浮动设计

    在页面布局的时候,能够用绝对定位来实现,可是因为调整某个区块框时其它区块的位置不会对应的改变,所以这并非布局的首选方式.可是使用浮动的区块框能够向左或向右移动,直到它的外边缘碰到包括它区块的边框或还有 ...

  5. word中创建文本框

    word中创建文本框         在插入中点击"文本框"选项卡,例如以下图所看到的:        手工加入自己想要的文本框格式,然后选择所创建的文本框,在工具栏处会发现多了一 ...

  6. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  7. 使用Htmlhelper,创建文本框TextBox

    下面通过HtmlHelper帮助类,创建文本框. 首先新建一个实体类,做为下面的例子: using System; using System.Collections.Generic; using Sy ...

  8. html的table使用div创建

    午休时间写了一个使用div创建table的案例 1.样式 <style> .table { display: table; } .tableRow { display: table-row ...

  9. ASP.NET div信息提示框显示几秒后隐藏

    今天在旧系统中,用户要求,要把一个javascript alert的信息提示,改为Div tag来显示,它在显示时,仅显示几秒,然后隐藏,这样无需用户去点击alert信息框的确定或是关闭铵钮. 下面I ...

随机推荐

  1. Unity3d插件汇总

    Unity3d 中的svn插件 插件下载地址:http://www.dehome.net/down/viewfile.php?file_id=53

  2. Arcgis10.2 破解注意问题

    Arcgis10.2 破解注意问题 2014年11月17日 20:22 按照网上教程直接替换service.txt和arcgis.exe之后 需要重新启动license服务 可是无法启动 解决办法 修 ...

  3. Weblogic 10.3.6生产模式启动

    生产模式启动里需要输入用户名和密码,很麻烦.在域的/security目录下创建文件boot.properties,内容为: username=weblogic password=weblogic123 ...

  4. 基于CSS3和HTML5图片加工前后对比代码

    分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  5. linux ckconfig

    linux自定义开机启动服务和chkconfig使用方法 linux自定义开机启动服务和chkconfig使用方法 1. 服务概述在linux操作系统下,经常需要创建一些服务,这些服务被做成shell ...

  6. 短日期比较 js

    function compareDate(startDate, endDate) { var arr = startDate.split("-"); var starttime = ...

  7. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  8. mysql中连接失败2003错误解决办法

    在使用mysql数据库,新建连接时,会报2003-Can't connect to server on 'localhost'(10038)错误,原因主要是MYSQL服务没有启动起来,但是进入:计算机 ...

  9. FUNCS.H中的函数声明

    /***************************************************************************                         ...

  10. Mysql学习笔记（十三）权限管理

    学习内容: 1.权限管理: 关于mysql的权限简单的理解就是mysql允许你做你权利以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执行update操作.只允许你从某台机器上连 ...