完美实现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 相关文章推荐
JScript的条件编译
May 29 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
一道关于JavaScript变量作用域的面试题
Mar 08 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
Vue实现简易购物车页面
Dec 30 Vue.js
实现一个简单得数据响应系统
Nov 11 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
初学Javascript的一些总结
2008/11/03 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
Bootstrap3 模态框使用实例
2017/02/22 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Python for循环及基础用法详解
2019/11/08 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
九年级体育教学反思
2014/01/23 职场文书
法人授权委托书
2014/09/16 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
勤俭节约主题班会
2015/08/13 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
文书工作总结(范文)
2019/07/11 职场文书