使用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. mysql int(1) 与 tinyint(1) 有什么区别？

    From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/08/25/2153016.html mysql int(1) tinyint ...

  2. myeclipse不编译解决方法

    在开发中经常遇到myeclipse不编译的情况,但不同情况的解决方法又不一样,今天同样是遇到此类情况,在网上狂搜,终于找到一篇好文,它囊括了解决这种情况的常用的方法,现在发出来与大家分享.我遇到的情况 ...

  3. RESTful 良好的API设计风格

    1.使用名词而不是动词 Resource资源 GET读 POST创建 PUT修改 DELETE /cars 返回 cars集合 创建新的资源 批量更新cars 删除所有cars /cars/711 返 ...

  4. 理解RxJava:(一)基础知识

    理解RxJava:(一)基础知识 本文翻译自Grokking RxJava, Part 1: The Basics,著作权归原作者danlew所有.译文由JohnTsai翻译.转载请注明出处,并保留此 ...

  5. 移动端前端框架UI库（Frozen UI、WeUI、SUI Mobile）

    Frozen UI 自述:简单易用,轻量快捷,为移动端服务的前端框架. 主页:http://frozenui.github.io/ 开发团队:QQVIP FD Team Github:https:// ...

  6. JAVA多线程编程之生产者消费者模式

    Java中有一个BlockingQueue可以用来充当堵塞队列,下面是一个桌面搜索的设计 package net.jcip.examples; import java.io.File; import ...

  7. 天猫浏览型应用的CDN静态化架构演变

    原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...

  8. TypeScript札记：初体验

    1.简介 TypeScript 是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript是一种 ...

  9. 随着ScrollView的滑动，渐渐的执行动画View

    今天是实现了一个小功能的东西.看看效果图: 实现方式: 1.自定义ScrollView   复写onScrollChange方法,来计算滑动的位置. 2.自定义接口,通过接口来在ScrollView中 ...

  10. Gulp：新一代前端构建利器

    1.什么是Gulp gulp.js 是一种基于流的,代码优于配置的新一代构建工具. Gulp 和 Grunt 类似.但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建. ...