js6

方块拖拽

首先鼠标拖拽要用到三大事件
onmousedown：鼠标选择元素
onmousemove：鼠标移动元素
onmouseup：释放元素，也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程

var div1=document.getElementById('div1')
    div1.onmousedown=function (event){
        var chaX=event.clientX-div1.offsetLeft
        var chaY=event.clientY-div1.offsetTop
        document.onmousemove=function(event) {
            div1.style.left=event.clientX-chaX+'px'
            div1.style.top=event.clientY-chaY+'px'}}
document.onmouseup=function(){
            document.onmousemove=null
        }
    }
用鼠标移动纸条 
< html > 
     < head > 
         < title > 用鼠标移动纸条 </ title > 
         < script language = " JavaScript " > 
         <!-- 
         var  blnCanMove  =   false ;
         var  osX  =   0 ;
         var  osY  =   0 ;
         function  startMove()  {
            if(blnCanMove) {
                event.srcElement.style.left = event.clientX - osX;
                event.srcElement.style.top = event.clientY - osY;
                
                mvPage.innerHTML = "(" + event.clientX + "," + event.clientY + ")";
            } else {
                event.returnValue = false;
            }
        } 
        
         function  stopMove()  {
            if(blnCanMove) {
                blnCanMove = false;
                event.returnValue = false;
            }
        } 
         function  initMoveInfo()  {
            if(event.button == 1) {
            //如果是按下了鼠标左键
                osX = event.offsetX;
                osY = event.offsetY;
                blnCanMove = true;
                event.srcElement.style.zIndex += 1;
            } else {
                blnCanMove = false;
            }
            event.returnValue = false;
        } 
         // --> 
          </ script > 
     </ head > 
    
     < body > 
    
     < div id = " mvPage "  style = " position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background-image: url('./number/0.gif'); "  onmousedown = " initMoveInfo(); "  onmousemove = " startMove(); "  onmouseup = " stopMove(); " > 

     </ div > 
    
     < br >< br >< br > 
     < div id = " mvPage1 "  style = " position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background: springgreen; "  onmousedown = " initMoveInfo(); "  onmousemove = " startMove(); "  onmouseup = " stopMove(); " > 

     </ div > 
 </ body > 
 </ html >

方块拖拽

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            /*border-radius: 50%;*/
            position: absolute;
            left: 0;
            top: 0;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: yellow;
            /*border-radius: 50%;*/
            position: absolute;
            left: 500px;
            top: 200px;
        }
    </style>
</head>
<body>
   <div id="div1"></div>
   <div id="div2"></div>
</body>
</html>
<script>
    var div1=document.getElementById('div1')
    div1.onmousedown=function (event){
        var chaX=event.clientX-div1.offsetLeft
        var chaY=event.clientY-div1.offsetTop
        document.onmousemove=function(event) {
            div1.style.left=event.clientX-chaX+'px'
            div1.style.top=event.clientY-chaY+'px'
            if (div1.offsetLeft>=div2.offsetLeft-div2.offsetWidth&&
                 div1.offsetTop>=div2.offsetTop-div2.offsetWidth&&
                 div1.offsetLeft<=div2.offsetLeft+div2.offsetWidth&&
                 div1.offsetTop<=div2.offsetTop+div2.offsetWidth) {
                div2.style.background='blue'
            }else{
                div2.style.background='yellow'
            }
        }
        document.onmouseup=function(){
            document.onmousemove=null
        }
    }
</script>

 

posted @ 2021-12-05 15:47  吴萌  阅读(208)  评论(0)    收藏  举报