js实现鼠标拖拽

目录

css代码

 html代码

js代码

完整代码

效果图: 


需求:

鼠标在图片内按下时 图片可以跟随盒子动

 鼠标弹起图片停下来

 如果图片在box的盒子里面时鼠标弹起了 就把图片展示在box里面 并且让图片回到起始位置

css代码

 .div {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: absolute;
        top: 0;
        left: 0;
    }

    img {
        width: 100%;
        height: 100%;
    }

    .box {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin-top: 300px;
        margin-left: 500px;
    }

 html代码

js代码

  

完整代码





    
    
    
    Document





    

效果图: 

js实现鼠标拖拽_第1张图片

你可能感兴趣的:(js案例,计算机外设,javascript,ecmascript,css,前端)