美文网首页
关于拖拽

关于拖拽

作者: fragments222 | 来源:发表于2018-01-02 17:38 被阅读0次

    自从上次写过拖拽就忘了怎么实现。今天又研究了半天,终于搞懂了。

    首先,被拖拽的元素一定要设置position:absolute,今天就是忘了这一点,频频出错,不得要领。

    其次,拖拽分三个步骤:

    1.点击元素,即onmousedown;

    2.移动,即onmousemove;

    3.鼠标弹起,即onmouseup;

    总结代码如下:

    pox.onmousedown = function(e){

        var e = e || window.event;

        var diffX = e.clientX - pox.offsetLeft;

        var diffY = e.clientY - pox.offsetTop;

        document.onmousemove = function(e){

            var e = e || window.event;

            pox.style.left = e.clientX - diffX + 'px';

            pox.style.top = e.clientY - diffY + 'px';

        }

        document.onmouseup = function(){

            document.onmousemove = null;

            document.onmouseup = null;

        }

    }

    相关文章

      网友评论

          本文标题:关于拖拽

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