完美实现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 相关文章推荐
toString()一个会自动调用的方法
Feb 08 Javascript
js post方式传递提交的实现代码
May 31 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
node跨域请求方法小结
Aug 25 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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重定向的3种方式
2013/03/07 PHP
PHP基于文件存储实现缓存的方法
2015/07/20 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
python 内置模块详解
2019/01/01 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Linux文件系统类型
2012/09/16 面试题
咖啡蛋糕店创业计划书
2014/01/28 职场文书
宣传普通话标语
2014/06/27 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis