码迷,mamicode.com
首页 > Web开发 > 详细

原生js拖拽效果

时间:2018-08-18 21:46:05      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:pad   doctype   cursor   rip   function   htm   bsp   nbsp   char   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
   *{
      margin:0;
      padding:0;
    }
   #box{
    width:100px;
    height:100px;
    background: red;
    position: absolute;
    left:0;
    top:0;
    cursor: move;
  }
</style>
<body>
      <div id="box"></div>
</body>
</html>
<script>
     var oBox=document.getElementById(‘box‘);

     oBox.onmousedown=function(e){
            var e=e || event;
            var disX=e.offsetX;
            var disY=e.offsetY;

            var iWidth=document.documentElement.clientWidth-this.offsetWidth;
            var iHeight=document.documentElement.clientHeight-this.offsetHeight;

       document.onmousemove=function(e){
           var l=e.clientX-disX;
           var t=e.clientY-disY;

           l = l>iWidth?iWidth:(l<0?0:l);
           t = t>iHeight?iHeight:(t<0?0:t);

           oBox.style.left=l+"px";
           oBox.style.top=t+"px";
        }

        document.onmouseup=function(){
        document.onmousemove=null;
       }
   }
</script>

原生js拖拽效果

标签:pad   doctype   cursor   rip   function   htm   bsp   nbsp   char   

原文地址:https://www.cnblogs.com/jsjx-xtfh/p/9498715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!