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

更新时间：2017年07月28日 15:09:53 作者：zhaoke_930325

这篇文章主要为大家详细介绍了完美实现js拖拽效果的代码，一起学习return false的用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了完美实现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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
拖拽

javascrpt密码强度校验函数详解
这篇文章主要为大家详细介绍了javascrpt密码强度校验函数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
js深拷贝和浅拷贝的深入讲解
深拷贝和浅拷贝是面试中经常出现的,主要考察对基本类型和引用类型的理解深度,这篇文章主要给大家介绍了关于js深拷贝和浅拷贝的相关资料,需要的朋友可以参考下
2022-05-05
30分钟快速入门掌握ES6/ES2015的核心内容（下）
这篇文章主要给大家介绍了如何通过30分钟快速入门掌握ES6/ES2015的核心内容的相关资料，之前给大家介绍过基础的一些内容，下面继续来介绍一些其他的新特性，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2018-04-04
浅析script标签中的defer与async属性
最近在网上看到一个前辈在写script标签的时候，居然同时写了async和defer属性，想着这是什么意思呢？所以决定深入的了解下这其中的学问，以下这篇文章就是个人在学习了之后的一些总结分析，有需要的朋友们可以参考借鉴，下面来一起学习学习吧。
2016-11-11
JavaScript进阶教程之非extends的组合继承详解
组合继承有时候也叫伪经典继承,指的是将原型链和借用构造函数技术组合到一块,从而发挥二者之长的一种继承模式,下面这篇文章主要给大家介绍了关于JavaScript进阶教程之非extends的组合继承的相关资料,需要的朋友可以参考下
2022-08-08
js下用gb2312编码解码实现方法
在js中将中文用gb2312编码。如，“我”编码后应该是“%CE%D2”。
2009-12-12
js右下角弹出提示框示例代码
这篇文章主要介绍了js右下角弹出提示框示例代码，即网页右下角弹出广告信息框实例代码，感兴趣的小伙伴们可以参考一下
2016-01-01
js获取时间精确到秒（年月日）
这篇文章主要为大家详细介绍了js获取时间精确到秒，实现获取当前年份、当前月份等操作，感兴趣的小伙伴们可以参考一下
2016-03-03
关于Ext中form移除textfield方法:hide(),setVisible(false)，remove()
根据条件来控制是否显示form里的textfield表单
2010-12-12
详解js中的原型，原型对象，原型链
这篇文章主要介绍了js中的原型，原型对象，原型链的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具