完美实现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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
JS解析XML实例分析
Jan 30 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
js微信分享接口调用详解
Jul 23 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python测试mysql写入性能完整实例
2018/01/18 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
学校司机岗位职责
2013/11/14 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
学期个人自我总结
2015/02/13 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
培根随笔读书笔记
2015/07/01 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript