要求:实现鼠标点击面板的一个点,拖动到固定的位置,出现虚线框

样图:

 
具体的代码实现:
js文件
 
<script>
window.onload = function(){
document.onmousedown=function(ev){
var oEvent=ev||event; /*检测id为createDiv的div框是否存在,存在就删除*/
if(document.getElementById("createDiv")!=null){
document.body.removeChild(document.getElementById("createDiv"));
}
//鼠标点击(down)的初始位置X,Y
var startX = oEvent.clientX;
var startY = oEvent.clientY; console.log("startX:"+startX);
console.log("startY:"+startY); document.onmouseup = function(ev){
//鼠标拿起(up)时,的具体坐标
console.log("endX:"+ev.clientX);
console.log("endY:"+ev.clientY); //创建div的width、height
var widX = ev.clientX - startX;
var heiY = ev.clientY - startY; createDiv(startX,startY,widX,heiY);
}
} } //动态创建div
function createDiv(startX,startY,widthX,heightY){
var oDiv=document.createElement('div');
oDiv.setAttribute("id","createDiv");
oDiv.style.left=startX+'px'; // 指定创建的DIV在文档中距离左侧的位置
oDiv.style.top=startY+'px'; // 指定创建的DIV在文档中距离顶部的位置
oDiv.style.border='1px dashed red'; // 设置边框
oDiv.style.position='absolute'; // 为新创建的DIV指定绝对定位
oDiv.style.width=widthX+'px'; // 指定宽度
oDiv.style.height=heightY+'px'; // 指定高度
document.body.appendChild(oDiv);
}
</script>

解析:

1.在页面onload的时候,就监听鼠标的onmousedown和onmouseup时间

2.在onmousedown时记录鼠标的初始位置

3.这里要注意,在onmousedown事件中,需要监听一下onmouseup事件。在onmouseup事件中,创建div框

 

js版的虚线框的更多相关文章

  1. js去除热点的虚线框

    1.一个页面有多张图片,图片的链接为热点绘制,在ie中点击会出现虚线框. <script type="text/javascript"> window.onload = ...

  2. css去掉a标签点击后的虚线框

    outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...

  3. css去掉a标签点击后的虚线框(转自网络)

    outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...

  4. a标签点击后的虚线框问题

    以前一直用的方法都是: a {outline: none;star:expression(this.onFocus=this.blur());} 后来发现有瑕疵,不完美.体现在页面调用JS动作比较频繁 ...

  5. 【工作笔记四】去掉a标签超链接的虚线框的方法

    a{ blr:expression(this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ ...

  6. IE去掉链接虚线框的几个方法

    虚线框简直就是个多余的东西,上一篇教大家怎么去除Firefox中链接和按钮虚线框,今天叫大家去掉去除IE中链接的虚线框.方法一:利用javascript的onfocus事件,实现如下:Html代码 & ...

  7. css去掉a标签点击后的虚线框,outline,this.blur()

    css去掉a标签点击后的虚线框,outline,this.blur() outline是css3的一个属性,用的很少.声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outl ...

  8. 去掉A标签的虚线框

    outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...

  9. 取消a或input标签聚焦后出现虚线框

    1:在a标签里加入js控制,当a标签被聚焦时,强制取消焦点,这时候a标签自然不会有虚线框. <a href="#" onfocus="this.blur();&qu ...

随机推荐

  1. C# 使用Quartz.Net

    //首先在Nuget上下载 Quartz包 但是由于我睿智Nuget 怎么也没法用 于是找到了这个 解决方法: 1.点击右侧的设置按钮, 2.弹出窗中左侧树形结构选择“程序包源”,再点击右上方的添加按 ...

  2. Struts配置文件

    本章节将带你学习Struts2 应用程序所需的基本配置.在这里可以看到哪些将被配置到一些重要的配置文件中:web.xml.struts.xml.struts-config.xml以及struts.pr ...

  3. 读micro8的一些记录与思考

    最近做了一段时间的攻击,个人对于整个攻击链相对来说还是比较熟悉.看了侯师傅的文章还是学到一些,做个备忘. 1.

  4. bisect:维护一个有序的列表

    介绍 bisect模块实现了一个算法来向列表中插入元素,同时仍然保证列表有序 有序插入 import bisect ''' 可以使用bisect.insort向一个列表中插入元素 ''' values ...

  5. 2.java多线程_synchronized(Lock)同步

    1.synchronized同步关键词 线程安全是并发编程中的重要关注点,应该注意到的是,造成线程安全问题的主要诱因有两点,一是存在共享数据(也称临界资源),二是存在多条线程共同 操作共享数据.因此为 ...

  6. 修改虚拟机CentOS系统ip地址和主机名

    按照教程安装了虚拟机但是未配置静态IP,所以导致IP地址经常变化,CRT,mysql等连接时经常出现问题. 所以修改虚拟机内CentOS系统的IP为静态IP. 一.查看当前网关 虚拟机-->[编 ...

  7. linux基础—课堂随笔05_文本三剑客之SED

    1.简介 sed是非交互式的编辑器,它不会修改文件,除非使用shell重定向来保存结果.默认情况下,所有的输出行都被打印到屏幕上. sed编辑器逐行处理文件(或输入),并将结果发送到屏幕.具体过程如下 ...

  8. MLE vs MAP: the connection between Maximum Likelihood and Maximum A Posteriori Estimation

    Reference:MLE vs MAP. Maximum Likelihood Estimation (MLE) and Maximum A Posteriori (MAP), are both a ...

  9. Python numpy.ZIP 安装问题

    今天在python上安装numpy,按照网上教程,安装pip,然后命令行直接:pip install numpy  .但是一直因为资源问题下载失败. 后来下载了一个numpy-1.11.2.zip 安 ...

  10. 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题

    这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...