完美实现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 相关文章推荐
基于jquery tab切换(防止页面刷新)
May 23 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
jquery if条件语句的写法
May 19 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 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
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
js表头排序实现方法
2015/01/16 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python处理中文标点符号大集合
2018/05/14 Python
基于python实现高速视频传输程序
2019/05/05 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
班级入场式解说词
2014/02/01 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
敬老院活动总结
2014/04/28 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
教师四风问题整改措施
2014/09/25 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书