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

最新推荐文章于 2024-07-21 13:38:37 发布

米克斯

最新推荐文章于 2024-07-21 13:38:37 发布

阅读量4.3k

点赞数 2

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

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

版权

本文详细介绍了如何使用纯JavaScript实现元素的拖放功能，并确保在所有主流浏览器中都能正常工作，包括兼容Internet Explorer。通过几个简单的步骤，你将能够掌握在网页中创建可拖动元素的关键技术。

摘要由CSDN通过智能技术生成

<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;
        }

        //鼠标