美文网首页
完美拖拽-JavaScript

完美拖拽-JavaScript

作者: Lamport | 来源:发表于2017-02-04 19:45 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 完美拖拽-JavaScript </title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                height: 100vh;
            }
            #box{
                width: 150px;
                height: 150px;
                background: blueviolet;
                position: absolute;
                top: 200px;
                left: 200px;
            }
            #box span{
                float: right;
                line-height: 20px;
                display: block;
                width: 40px;
                text-align: center;
                background: greenyellow;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <span id="back">回放</span>
        </div>
        <script type="text/javascript">
            function $(id){
                return document.getElementById(id);
            };
            var arrX = [];
            var arrY = [];
            $("box").onmousedown = function(ev){
                var ev = ev || window.event;
                // 获取鼠标按下时的坐标
                var reX = ev.offsetX || ev.layerX;
                var reY = ev.offsetY || ev.layerY;
                document.onmousemove = function(ev){
                    var ev = ev || window.event;
                    $("box").style.top = ev.pageY - reY + 'px';
                    $("box").style.left = ev.pageX - reX + 'px';
                    // 控制移动范围
                    if( $("box").offsetTop <= 0 ){
                        $("box").style.top = 0;
                    }else if( $("box").offsetTop >= document.body.offsetHeight - $("box").offsetHeight ){
                        $("box").style.top = document.body.offsetHeight - $("box").offsetHeight + 'px';
                    };
                    if( $("box").offsetLeft <= 0 ){
                        $("box").style.left = 0;
                    }else if( $("box").offsetLeft >= document.body.offsetWidth - $("box").offsetWidth ){
                        $("box").style.left = document.body.offsetWidth - $("box").offsetWidth + 'px';
                    };
                    arrY.push( $('box').offsetTop );
                    arrX.push( $('box').offsetLeft );
                    console.log(arrY);
                };
            };
            document.onmouseup = function(){
                document.onmousemove = null;
            };
            $("back").onclick = function(){
                var timer = null;
                var index = arrX.length - 1;
                timer = setInterval(function(){
                    $("box").style.top = arrY[index--] + 'px';
                    $("box").style.left = arrX[index--] + 'px';
                    if( index<=0 ){
                        clearInterval(timer);
                        arrX = [];
                        arrY= [];
                    }
                },50);
            };
            $("back").onmousedown = function(ev){
                ev.stopPropagation();
            };
            
        </script>
    </body>
</html>

相关文章

  • 完美拖拽-JavaScript

  • 完美拖拽

    $(function(){ $('div').mousedown(function(ev){ var disX=e...

  • 控件拖拽

    JavaScript实现最简单的拖拽效果 HTML5 drag & drop 拖拽与拖放简介 基于HTML5 dr...

  • JavaScript拖拽函数

    拖拽的时候,如果有文字被选中,会产生问题原因:当鼠标按下的时候,如果页面中有文字被选中,那么会触发浏览器默认拖拽文...

  • JavaScript 鼠标拖拽

    代码:

  • JavaScript拖拽效果

    要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标。 获取事件对象 var...

  • javascript实现简单的trello实例

    trello for javascript. 简单的trello实例,用来实现鼠标拖拽停放。 作者:justjavaz

  • JavaScript实现图片和div拖拽

    今天需要一个图片拖拽功能,代码量小,就用原生JavaScript写吧! 我们拖拽的动作由这么一组流程:1、鼠标在图...

  • javascript 原生实现拖拽

    在javascript中,我们可以通过事件event对象来获取一些属性和方法。其中clinetX和clientY这...

  • JavaScript--拖拽原理

    拖拽雏形:html+css 代码: 问题:如果鼠标拖的快点,会发现鼠标从div出去后,这个时候div不会跟着鼠标走...

网友评论

      本文标题:完美拖拽-JavaScript

      本文链接:https://www.haomeiwen.com/subject/sgksittx.html