欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-26 13:55:40
本文为大家分享了完美实现js拖拽效果的具体代码,告诉大家return false的用法,供大家参考,具体内容如下 1.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>

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