原生JS基础之拖拽效果

来源：互联网发布：问道辅助软件编辑：程序博客网时间：2024/05/29 11:36

一.当我们在浏览器实现拖拽功能时,需要明白三点核心逻辑：

1.按下鼠标时,触发onmousedown事件.

2.按下鼠标拖动时,触发ommousedown和onmousemove事件

3.放下鼠标时,触发onmouseup事件.

废话不多说了,直接放码

Html body 部分

<body>   <div  id = "myDiv" >        <img src="1.png" alt="图片一" id = "pic">   </div></body>

CSS部分:

    <style type = "text/css">       body {         margin:none;         padding:none;       }       #myDiv{       }       #pic{         width:300px;         height:300px;         border:1px solid black;         top:10px;         left:5px;         position:absolute;         cursor:pointer;         -webkit-box-shadow:3px 3px 3px 0px #F0F;         box-shadow:3px 3px 3px 0px #F0F;         background-color:red;        }       #myDiv2 {          width:200px;          height:300px;          border:2px solid #000;          margin-top:30px;          margin-left:100px;        }    </style>

JS代码如下:

    <script type = "text/javascript">        window.onload = function(){        //获取目标        var OmyDiv = document.getElementById('pic');        //按下鼠标             OmyDiv.onmousedown=(function(e) {                 var Oevent = getEvent(e);                //阻止默认事件,即点击图片会跳转                  if (e&&e.preventDefault) {                           e.preventDefault();//W3c                } else {                    window.event.returnValue = false;//ff                                     }                  //初次获取点的padding值            var paddingX = Oevent.clientX-this.offsetLeft;            var paddingY = Oevent.clientY-this.offsetTop;              //移动鼠标               this.onmousemove=(function(e){                     var Oevent1 = getEvent(e);                   //  var _this = this;                   /重新计算omyDiv的left top                      this.style.left = (Oevent1.clientX - paddingX)+'px'                     this.style.top  = (Oevent1.clientY - paddingY)+'px';                          if (this.offsetLeft<0) {                             this.style.left = 0 +'px';                            // console.log(OmyDiv.offsetLeft);                        } else if
                    (this.offsetLeft>document.body.clientWidth -300) 
                                                {                                              this.style.left = (document.body.clientWidth -300)+'px';                        }                         if (this.offsetTop<0) {                           this.style.top = 0 +'px';                        } else if(this.offsetTop>document.documentElement.clientHeight -300) {                            this.style.top = (document.documentElement.clientHeight -300) +'px';                        }                //放下鼠标                          document.onmouseup=(function(){                           OmyDiv.onmousemove= null;                           document.onmouseup = null;                                                        console.log('mouseup');                                                  });               });               });        };    //封装获取事件方法     function getEvent(e){     return e||window.event;     }     //    </script>

阅读全文

1 0