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

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“完美实现js拖拽效果 return false用法详解”

暂无“完美实现js拖拽效果 return false用法详解”评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?