使用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. drupal7 form模板复写方法

    给form制作一个template 从官方的drupal api document中可得到form有#theme这个参数,它可以指定form使用一个模板来用于form的基本布局,#theme的值必须是 ...

  2. [Sql Server2008]树结构的递归算法

    http://blog.csdn.net/tonyzhou2008/article/details/5100683 本文主要讲述三个内容: 1.如何创建hierarychyid的表,插入数据及基本递归 ...

  3. Android开发常见问题

    1. android模拟机上不能加文件提示read only file system 先:adb shell 后:mount -o remount ,rw /就行不需要附加多余的东西 就上面两行,解决 ...

  4. openlayers 注册事件例子

    registerEvents:function() { this.events = new OpenLayers.Events(this, this.div, null, true); functio ...

  5. 【Java设计模式】单例模式

    ### 1. 概述> 单例模式是确保某一个类中有且只有一个实例. ----------### 2. 饿汉式单例``` javapublic class SingletonInstance { p ...

  6. 记一个dynamic的坑

    创建一个控制台程序和一个类库, 在控制台创建一个匿名对象,然后再在类库中访问它,代码如下: namespace ConsoleApplication1 { class Program { static ...

  7. (转) IPv6相关RFC

    转自http://blog.csdn.net/lucien_cc/article/details/12688477 IPv6 Spec RFC 2460 : Internet Protocol, Ve ...

  8. Web Component--01. 简介

    Web Components 是什么? Web Components是W3C定义的新标准,它给了前端开发者扩展浏览器标签的能力,可以自由的定制组件,更好的进行模块化开发,彻底解放了前端开发者的生产力. ...

  9. Configuring Service Broker for Asynchronous Processing

    Configuring Service Broker for Asynchronous Processing --create a database and enable the database f ...

  10. LeetCode - 38. Count and Say

    38. Count and Say Problem's Link ------------------------------------------------------------------- ...