Home > Article > Web Front-end > Use js to implement stylish drag and drop function

Use js to implement stylish drag and drop function

韦小宝Original: 2018-03-09 15:57:351245browse

We can see very fashionable and cool picture dragging on some websites. Of course, these operations can be achieved with JavaScript, so today we will talk about how to use JavaScript If you are interested in implementing the drag-and-drop function, if you haven’t learned about drag-and-drop using JavaScript, let’s take a look!

Questions to look at:

1. How to implement the drag function on the web page.

2. The difference between document.documentElement and document.body.
document.documentElement.clientWidth refers to the width of the entire html document, the width of document.body.clientWidth. The two are not the same. You can test it through console.log(document.documentElement) and console.log(document.body) in the console.

3. The difference between getBoundingClientRect().left and offsetLeft.
(1) getBoundingClientRect() is used to obtain the left, top, right, and bottom of the element.

(2)offset obtains the left and top relative to the parent. getBoundingClientRect() gets the left, top, right, and bottom relative to the window.

4. e.clientX refers to the coordinates of the mouse point relative to the window.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
    <style type="text/css">
        #mask {
            position: fixed;
            left:0;
            top:0;
            width:100%;
            height: 100%;
            background-color: hsla(250,100%,50%,0.6);
            display: none;
        }
        #popBox {
            position: absolute;
            background-color: #fff;
            width:200px;
            height: 200px;
            /*left:50%;
            top:50%;*/
            /*margin-top: -100px;
            margin-left: -100px;*/
        }
    </style>
</head>
<body>
    <button id="clickBtn">点击</button>
    <p id="mask">
        <p id="popBox"></p>
    </p>
    <script type="text/javascript">
        var clickBtn = document.getElementById("clickBtn");
        var popBox = document.getElementById("popBox")
        var mask = document.getElementById("mask");
        clickBtn.onclick = function() {
            mask.style.display = "block";
            popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";
            popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";

        }
        popBox.onclick = function(e) {
            var e = e || window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。
            e.cancelBubble = true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。
        }
        mask.onclick = function() {
            mask.style.display = "none";
        }

        //拖拽 mousedown->mousemove->mouseup 
        popBox.onmousedown = function(e) {
            var e = e || window.event;
            var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
            var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。
            var oY = e.clientY - pos.top;
            document.onmousemove = function(e) {
                var e = e || window.event;
                var oLeft = e.clientX - oX;
                var oTop = e.clientY - oY;
                popBox.style.left = oLeft + "px";
                popBox.style.top = oTop + "px";
                if (oLeft<0) {
                    popBox.style.left = 0 + "px";
                };
                if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {
                    popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。


                }
                if (oTop<0) {
                    popBox.style.top = 0 + "px";
                };
                if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {
                    popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";
                }

            }
            popBox.onmouseup = function() {
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>

Combined with code analysis, I feel that I have given the source code my own attempts to delete and modify it. This kind of learning progresses very quickly and is not easy to forget.

Related recommendations:

js control file drag and drop and obtain drag content

The above is the detailed content of Use js to implement stylish drag and drop function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A lazy loading component based on jqueryNext article：A lazy loading component based on jquery

See more

Use js to implement stylish drag and drop function

Related articles