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

样图:

 
具体的代码实现:
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. Django单元测试 相关知识

    前言 本文,旨在说明python Django如何编写单元测试,从“背景”,“测试要求”,“代码编写”,“如何运行”,“检验测试覆盖度” 这几个方面来说明附上django的官方文档单元测试章节=> ...

  2. ffmpeg生成视频封面图

    ffmpeg 是一个视频处理软件 php-ffmpeg 是一个让 php 可以操作 ffmpeg 的 php插件,封装好了各种操作视频的名命令.直接调用对应的方法即可. 使用过程很曲折也很简单 曲折在 ...

  3. 记录旧手机(米6)安装Linux(Ubuntu16.04)踩过的坑

    旧的小米6在抽屉吃灰半年,一直没想好要怎么处理,于是就想着安装Linux. 完整教程来自https://blog.csdn.net/Greepex/article/details/85333027 原 ...

  4. 微信小程序开发(一)创建一个小程序Hello World!

    开发微信小程序并不是很难,网上有很多小程序开发资料,尤其是微信官方的<小程序开发指南>最详细. 下面是我开发小程序的历程: 第一步,请前往https://mp.weixin.qq.com/ ...

  5. 第三方库-正则re

    Python正则表达式里的单行re.S和多行re.M模式 Python 的re模块内置函数几乎都有一个flags参数,以位运算的方式将多个标志位相加.其中有两个模式:单行(re.DOTALL, 或者r ...

  6. zencart用sql将某个产品属性值设为只读和默认

    zencart用sql将某个产品属性值设为只读和默认 UPDATE `products_attributes` SET `attributes_display_only` = '1', `attrib ...

  7. 开源框架相关面试问题-retrofit网络框架面试问题讲解

    retrofit使用简介: 在retrofit中通过一个接口作为Http请求的api接口.注意:@GET("url")中的url只是一个路径,不包含主机号的. 创建一个retrof ...

  8. 【安徽集训】Entropy

    出题人罗哲正是神爷 Orz Description 这是一道披着交互题外衣的通信题,只支持 C++. 你需要实现 \(2\) 个函数. 交互库先给第一个函数传入一个参数 \(n\),你加密得到的 \( ...

  9. PAT乙级1015

    题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805307551629312 题解 思路比较简单,核心就是定义一 ...

  10. hive日期函数-原生函数(二)

    1. from_unixtime 日期函数UNIX时间戳转日期函数: from_unixtime 语法:from_unixtime(bigint unixtime[, stringformat]) 返 ...