实现元素拖拽的两种方式

时间: 2019-08-08阅读: 385标签: 拖拽

第一种方式:使用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>


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5200

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

拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择,拖拽实现元素布局的修改。原生Js实现元素拖拽、图片到指定区域进行预览的方法实现

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

运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便;实现方式:template部分、script部分

原生js实现拖拽功能

如果要设置物体拖拽,必须使用三个事件,分别是:1、onmousedown:鼠标按下事件2、onmousemove:鼠标移动事件3、onmouseup:鼠标抬开事件

js中drag拖拽

在没有drag事件的时候,做元素拖拽使用的都是mouse事件,但mouse在处理过程中可能有这样或那样的问题,主要还是感觉不流畅,如果小伙伴们不在考虑低版本IE(<IE9)的话,可以偿试一下drag,会有意想不到的收获。。

ngDraggable.js_AngularJS之拖拽排序

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发。首先先介绍一些基本的概念;ng-drop:是否允许放入拖拽元素

移动端拖拽 - 固定定位 fixed

移动端的拖拽有两种主流的实现方案:1. 将元素设置为固定定位,然后在拖拽的时候修改其定位,实现拖拽的效果;2. 使用 transform 中的平移 translate 属性实现拖拽。

vue模块拖拽实现

正巧在之前面试中遇到问实现拖拽效果。当时面试的时候简单回答了实现的方式与逻辑。现在闲来无事,把这个东西实现了一下。原理很简单,写的很方便。

实现平滑过渡的拖拽排序

最近重读Vue官方文档,在列表的排序过渡这一小节,文档提到,<transition-group> 组件有一个特殊的地方,不仅可以实现进入和离开动画,还可以改变定位,官网示例如下

实现一个美化原生拖拽的draggable-polyfill

在HTML5还未普及之前,实现元素的拖拽还算是一件比较麻烦的事,大概思路就是监听鼠标移动相关事件,下面是伪代码;HTML5新增了拖放draggable标准,拖拽就变得简单了

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

当我们需要对Dom元素进行底层操作的时候,这时候我们就需要使用vue的自定义指令。这篇文章将讲解:如何注册Vue自定义指令?Vue的钩子函数,vue钩子函数参数,vue实现拖拽功能,实现图片加载功能,Vue自定义指令集成第三方插件 ...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广