简单几步原生javascript实现元素拖拽功能兼容所有浏览器

最新推荐文章于 2024-04-17 11:17:35 发布

米克斯

最新推荐文章于 2024-04-17 11:17:35 发布

阅读量4.3k

点赞数 2

分类专栏： JavaScript 文章标签： javascript js拖拽原生js拖拽拖拽兼容ie

本文链接：https://blog.csdn.net/u012906135/article/details/52711319

版权

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>*{margin: 0;padding: 0;}</style>
</head>
<body>
<div id="demo" style="position:absolute;width: 100px;height: 100px;background: #ccc;border:solid 1px #ccc;">按住左键拖动</div>
</body>
<script>
    window.onload = function() {
        //用于确定是否是拖拽的对象
        var drag;
        //鼠标位于目标元素上的时候距离目标元素的位置
        var x,y;
        //取得元素
        var ele = document.getElementById('demo');

        //鼠标按下去
        ele.onmousedown = function(evt) {
            //取得事件对象
            _event = evt || window.event;
            //设置drag元素
            target = _event.target || _event.srcElement;
            x = _event.clientX - target.offsetLeft;
            y = _event.clientY - target.offsetTop;
            drag = target;
        }

        //鼠标

最低0.47元/天解锁文章

米克斯

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简单几步原生javascript实现元素拖拽功能兼容所有浏览器

代码 *{margin: 0;padding: 0;}按住左键拖动 window.onload = function() { //用于确定是否是拖拽的对象 var drag; //鼠标位于目标元素上的时候距离目标元素的位置 var x,y; //取得元素
复制链接

扫一扫