元素拖放介绍

2022-02-01 17:01:02 阅读：109 来源： 互联网

介绍元素拖放的方法。

1.要拖动的元素添加属性draggable="true"后，就能够拖动，但是松开鼠标后元素还是在原来的位置

2.监听元素的拖放事件，在事件结束的时候改变元素的位置

3.元素设置为绝对定位，根据拖动过程中鼠标位置在水平和垂直方向的变化量重新设置元素的定位置

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .container {
                height: 600px;
                margin: 30px;
                border: 3px solid #e9e9e9;
                position: relative;
            }
            #img {
                width: 50px;
                position: absolute;
                left: 10px;
                top: 15px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img
                id="img"
                draggable="true"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0709%2F497d79c8j00qvytx4001uc000hs00qog.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1646233926&t=5ea770e1b1e00c1adafa63d824f3dd69"
                alt=""
            />
        </div>
    </body>
    <script>
        let img = document.querySelector("#img");
        let mousePageX, mousePageY, imgX, imgY;
        // 拖放开始
        img.ondragstart = (e) => {
            // 记录元素的初始位置
            imgX = parseInt(getComputedStyle(img).left);
            imgY = parseInt(getComputedStyle(img).top);
            // 记录鼠标的初始位置
            mousePageX = e.pageX;
            mousePageY = e.pageY;
        };
        // 拖放结束
        img.ondragend = (e) => {
            // 鼠标位置在水平方向和垂直方向的变化量，再加上元素的初始位置
            img.style.left = e.pageX - mousePageX + imgX + "px";
            img.style.top = e.pageY - mousePageY + imgY + "px";
        };
    </script>
</html>

标签：元素,鼠标,img,top,位置,介绍,拖放
来源： https://www.cnblogs.com/jyughynj/p/15859231.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

元素拖放介绍