JavaScript ondragstart拖拽事件

上一篇文章：

JavaScript onhashchange事件当哈希值变动时触发

下一篇文章：

gif、canvas动画转mp4代码

gooood个人博客网站

JavaScript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="http://good1230.com/templates/svg/css-file.svg" alt="" style="width: 100px;">
    <script>
        let ball = document.querySelector('img')
        ball.onmousedown = function (event) {

            let shiftX = event.clientX - ball.getBoundingClientRect().left;
            let shiftY = event.clientY - ball.getBoundingClientRect().top;

            ball.style.position = 'absolute';
            ball.style.zIndex = 1000;
            document.body.append(ball);

            moveAt(event.pageX, event.pageY);

            // 移动现在位于坐标 (pageX, pageY) 上的球
            // 将初始的偏移考虑在内
            function moveAt(pageX, pageY) {
                ball.style.left = pageX - shiftX + 'px';
                ball.style.top = pageY - shiftY + 'px';
            }

            function onMouseMove(event) {
                moveAt(event.pageX, event.pageY);
            }

            // 在 mousemove 事件上移动球
            document.addEventListener('mousemove', onMouseMove);

            // 放下球，并移除不需要的处理程序
            ball.onmouseup = function () {
                document.removeEventListener('mousemove', onMouseMove);
                ball.onmouseup = null;
            };

        };

        ball.ondragstart = function () {
            return false;
        };
    </script>
</body>

</html>

https://zh.javascript.info/mouse-drag-and-drop

当前文章内容为原创转载请注明出处：http://www.good1230.com/detail/2023-06-17/631.html

最后生成于 2024-06-22 12:07:41

上一篇文章：

JavaScript onhashchange事件当哈希值变动时触发

下一篇文章：


上一月		一			下一月
日	一	二	三	四	五	六

JavaScript ondragstart拖拽事件

JavaScript onhashchange事件当哈希值变动时触发

gif、canvas动画转mp4代码

JavaScript onhashchange事件当哈希值变动时触发

gif、canvas动画转mp4代码

热门推荐：