完美实现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 相关文章推荐
javascript动态加载实现方法一
Aug 22 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 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/04/09 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
JavaScript实现区块链
2018/03/14 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
详解JS函数防抖
2020/06/05 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
js实现日历
2020/11/07 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
python smtplib发送带附件邮件小程序
2018/05/22 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
python 基于wx实现音乐播放
2020/11/24 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
大学军训感言800字
2014/02/27 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
反腐倡廉标语
2014/06/24 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js