实现元素拖拽的两种方式

更新日期: 2019-08-08阅读: 2.7k标签: 拖拽分享

复制链接

新浪微博

QQ 好友

扫一扫分享

第一种方式：使用H5的api dataTransfer

实现思路：

1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存；

2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。

代码如下：

<html>
<head>
    <meta charset="utf-8">
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-bottom: 20px;
            background: lightblue;
        }

        .box2 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            background: lightcoral;
        }
    </style>
</head>

<body>
    <!-- 参数要传入event对象 -->
    <div class="box1" ondragover="allowdrop(event)" ondrop="drop(event)">
        <img src="img/2.jpg" alt="00" draggable="true" ondragstart="drag(event)" id="drag" width="50" height="50">
        <span>我是盒子一</span>
    </div>
    <div class="box2" ondragover="allowdrop(event)" ondrop="drop(event)">
    <span>我是盒子二</span></div>
    <script>
        function allowdrop(e) {
            e.preventDefault();
        }

        function drop(e) {
            e.preventDefault();
            var data = e.dataTransfer.getData("text");
            e.target.appendChild(document.getElementById(data));
        }

        function drag(e) {
            e.dataTransfer.setData("text", e.target.id);
        }
    </script>
</body>

</html>

第二种方式：使用原生js（通过计算元素的位置结合定位实现）

思路：

1.获取鼠标距离元素左边界和上边界的距离；

2.移动后计算出元素相对原来位置的相对距离，赋予样式。

代码：

<html>
<head>
    <meta charset="utf-8">
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            margin-bottom: 20px;
            background: lightblue;
        }

        .box2 {
            width: 100px;
            height: 100px;
            border: 1px black solid;
            background: lightcoral;
        }

        #drag {
            position: relative;
        }
    </style>
</head>

<body>
    <div class="box1" id="drag">
        <span>我是盒子一</span>
    </div>
    <div class="box2">
        <span>我是盒子二</span></div>
    <script>
        let drag = document.querySelector("#drag");//获取操作元素
        drag.onmousedown = function (e) {//鼠标按下触发
            var disx = e.pageX - drag.offsetLeft;//获取鼠标相对元素距离
            var disy = e.pageY - drag.offsetTop;
            console.log(e.pageX);
            console.log(drag.offsetLeft);
            document.onmousemove = function (e) {//鼠标移动触发事件，元素移到对应为位置
                drag.style.left = e.pageX - disx + 'px';
                drag.style.top = e.pageY - disy + 'px';
            }
            document.onmouseup = function(){//鼠标抬起，清除绑定的事件，元素放置在对应的位置
                document.onmousemove = null;
                document.onmousedown = null;
            };
            e.preventDefault();//阻止浏览器的默认事件
        };
    </script>
</body>

</html>

链接: https://fly63.com/article/detial/5200

实现元素拖拽的两种方式

第一种方式：使用H5的api dataTransfer

第二种方式：使用原生js（通过计算元素的位置结合定位实现）

原生js实现拖拽与拖放事件，JavaScript实现元素拖拽、图片到指定区域进行预览的例子

Vue自定义指令：通过Vue.directive实现集成第三方插件，拖拽功能，图片加载等功能

移动端拖拽 - 固定定位 fixed

vue模块拖拽实现

原生js实现拖拽功能

js实现本地图片文件拖拽效果

ngDraggable.js_AngularJS之拖拽排序

拖放实现--兼容手机与pc端

实现平滑过渡的拖拽排序

Element ui表格组件+sortablejs实现行拖拽排序