JS拖拽效果

2018-07-20 来源：open-open

JS拖拽效果，得到鼠标事件，可拓展功能，改变元素的宽和高！

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

        margin-top: 10px;

        width: 200px;

        height: 150px;

        background: #dadada;

        position: absolute;

        cursor:move;

        }


    </style>


</head>

<body>

<div id="div" ></div>

<script>

        var drag=false;

        var x, y,movex,movey;

        var movediv  =document.getElementById('div');

        movediv.onmousedown=function(){

              drag=false;

              x = window.event.clientX;  /*当前鼠标坐标*/

              y =window.event.clientY;

             movex = movediv.offsetLeft;  /*当前元素坐标*/

             movey =movediv.offsetTop

        }

    document.onmousemove=function(){

        if(drag) return false;

        movediv.style.top= movey +  window.event.clientY  -y +'px';

        movediv.style.left=  movex  +  window.event.clientX  -x  +'px';

    }

   document.onmouseup=function(){drag=true}

</script>

</body>

</html>

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。

上一篇:将数据以图片的形式输出的PHP代码

下一篇:计算php函数的执行时间

最新资讯

热门推荐