完美实现js拖拽效果 return false用法详解


Posted in Javascript onJuly 28, 2017

本文为大家分享了完美实现js拖拽效果的具体代码,告诉大家return false的用法,供大家参考,具体内容如下

1.return false可以用来阻止默认事件即系统默认事件。例如通过阻止默认事件,来对textarea中的值进行范围限制(通过限制keycode的数值),也可以自定义在页面中的右键菜单(oncontextmenu)。

2.在鼠标移动(mousemove)等事件中,是需要给事件传一个参数,保证程序的正常运行。而为了兼容取事件方法为:var oEvent=ev||event;

3.在节点中创建一个新的节点的方法为:

var oBox=document.createElement('div');
    oBox.className='box';
    oBox.style.left = oDiv.offsetLeft+'px';
    oBox.style.top = oDiv.offsetTop+'px';
    oBox.style.width = oDiv.offsetWidth+'px';
    oBox.style.height = oDiv.offsetHeight+'px';
    document.body.appendChild(oBox);
    //注意,在创建完之后一定要将创建好的节点加入body中!!!

下列为完整代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>完美拖拽2</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  #div1{
   width: 150px;
   height: 150px;
   background: #71C525;
   position: absolute;
  }
  .box{
   border: 2px dashed black;
   position: absolute;
  }
 </style>
 <script>
  window.onload=function()
  {
   var oDiv = document.getElementById('div1');
   var disX=null;
   var disY=null;

   oDiv.onmousedown=function(ev)
   {
    var oEvent=event||ev;
    disX=oEvent.clientX-oDiv.offsetLeft;
    disY=oEvent.clientY-oDiv.offsetTop;

    var oBox=document.createElement('div');
    oBox.className='box';
    oBox.style.left = oDiv.offsetLeft+'px';
    oBox.style.top = oDiv.offsetTop+'px';
    oBox.style.width = oDiv.offsetWidth+'px';
    oBox.style.height = oDiv.offsetHeight+'px';

    document.body.appendChild(oBox);

    document.onmousemove=function(ev)
    {
     var oEvent=event||ev;
     var l=oEvent.clientX-disX;
     var t=oEvent.clientY-disY;

     if (l<0) {
      l=0;
     } else if (l>document.documentElement.clientWidth-oDiv.offsetWidth) {
      l=document.documentElement.clientWidth-oDiv.offsetWidth;
     }
     if (t<0) {
      t=0;
     } else if (t>document.documentElement.clientHeight-oDiv.offsetHeight) {
      t=document.documentElement.clientHeight-oDiv.offsetHeight;
     }

     oBox.style.left = l+'px';
     oBox.style.top=t+'px';

    };
    document.onmouseup=function()
    {
     document.onmousedown=null;
     document.onmousemove=null;
     oDiv.style.left = oBox.offsetLeft+'px';
     oDiv.style.top = oBox.offsetTop+'px';
     document.body.removeChild(oBox);
    };
    return false;//阻止默认事件(系统默认事件)!
   };
  };
 </script>
</head>
<body>
 <div id="div1"></div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
给js文件传参数(详解)
Jul 13 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
javascript实现计算器功能
Mar 30 Javascript
vue实现公共方法抽离
Jul 31 Javascript
webpack 2的react开发配置实例代码
Jul 28 #Javascript
基于AngularJS实现表单验证功能
Jul 28 #Javascript
AngularJS service之select下拉菜单效果
Jul 28 #Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 #Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 #Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 #Javascript
基于JS实现移动端左滑删除功能
Jul 28 #Javascript
You might like
无限级别菜单的实现
2006/10/09 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python生成器表达式和列表解析
2016/03/10 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
电大毕业生自我鉴定
2014/04/10 职场文书
微电影大赛策划方案
2014/06/05 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL