使用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. win7任务栏还原为xp样式

    win7的确是非常强大的操作系统,值得一提的是超级任务栏,非常新颖,不过,不是很适应win7的超级任务栏,今天,我们恢复win7超级任务栏还原xp任务栏. 方法/步骤: 1.在win7超级任务栏空白处 ...

  2. 关于python协程的一个例子的学习

    例子来自https://blog.tonyseek.com/post/event-manage-with-greenlet/ 加了一些注释看懂了: 注释中的数字表示执行的顺序,这个简单的例子用到了py ...

  3. 【Thinking in Java-CHAPTER 3】操作符

    优先级 赋值 对象在使用c=d,那么c和d都指向原本只有d指向的那个对象. 方法调用中的别名问题:当一个对象作为参数传递到一个函数中,函数改变了这个参数,则改变了传递进来的对象: 自增和自减 浮点型的 ...

  4. JS DOM元素

    // 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { var value = element.c ...

  5. JS基础回顾，小练习（判断数组，以及函数）

    追梦子博客版权所有. // 判断arr是否为一个数组,返回一个bool值 方法1: function isArray(arr) { var str = arr.__proto__.constructo ...

  6. 《微信小程序七日谈》- 第四天：页面路径最多五层？导航可以这么玩

    <微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩 微信小 ...

  7. Mybatis 示例之 foreach

    foreach一共有三种类型,分别为List,[](array),Map三种. foreach的第一篇用来将List和数组(array). 下面表格是我总结的各个属性的用途和注意点. foreach属 ...

  8. CSS布局 -- 左侧定宽，右侧自适应

    左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...

  9. 【Win10】让 AppBarButton 支持更复杂的 Icon 内容

    最近有一个需求,需要制作这么一个 AppBarButton: 这个 AppBarButton 的 Icon 是一个评论框图标里面再显示评论数(大于 99 条则显示 99+).其中评论数是通过数据绑定得 ...

  10. C#怎样处理xml文件的大于号和小于号等常用符号（xml符号引发的程序错误）

    在程序中由xml配置而成的sql语句要转换为C#支持的sql语句 <settings> <select> a.*</select> <from> (se ...