完美实现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拖拽效果 return false用法详解就介绍到这了。人生不售来回票,一旦动身,绝不能复返。更多相关完美实现js拖拽效果 return false用法详解内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
简单实现ajax拖拽上传文件

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

JavaScript使用面向对象实现的拖拽功能详解

原生JS使用Canvas实现拖拽式绘图功能

运用js实现图层拖拽的功能