拖曳操作需要借助于鼠标来实现，如文件或图片的移动操作等。在开发中，我们经常使用原生的JavaScript来实现拖曳效果，实现起来比较复杂。因此，HTML5为我们提供了更好用的接口或者事件，在很大程度上简化了页面中拖曳交互的实现难度。

图片和链接默认是可以拖动的，它们不用添加draggable属性。

一个完整的拖曳效果由拖曳（Drag）和释放（Drop）组成的。

在拖曳操作中，被拖动的元素称之为源对象，它指的是页面中设置了draggable="true"属性的元素；

源对象进入的元素称之为目标元素，目标元素可以是页面中的任一元素

拖曳元素的事件

事件 事件描述
ondragstart 当拖曳开始时触发
ondrag 作用于整个拖曳过程，ondrag事件表示在拖曳元素被拖动过程中会触发的事件。此时，鼠标可能在移动也可能未移动。
ondragend 当拖曳结束时触发

目标元素相关的事件

事件 事件描述
ondragenter 当源对象进入目标元素时触发
ondragover 当源对象悬停在目标元素上方时触发
ondragleave 当源对象离开目标元素时触发
ondrop 当源对象在目标元素上方释放鼠标时触发

只有当源对象上的鼠标点进入目标元素时，才会触发ondragenter事件。

默认情况下，浏览器会默认阻止ondrop事件，如果想要触发该事件,则需要在ondragover事件中使用“return false;”

（或者e.preventDefault()）来阻止其默认行为

拽托实例1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width= , initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 200px;

            height: 200px;

            border: 1px solid red;

            float: left;

            margin: 10px;

        }

        div:nth-child(2) {

            border: 1px solid green;

        }

        div:nth-child(3) {

            border: 1px solid blue;

        }

        p {

            height: 25px;

            background-color: pink;

            line-height: 25px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="div1">

        <p id="p1" draggable="true">拖曳内容1</p>

        <p id="p2" draggable="true">拖曳内容2</p>

    </div>

    <div id="div2"></div>

    <div id="div3"></div>

    <script>

        // 当拖曳开始时触发

        document.ondragstart = function (event) {

            console.log('源对象开始被拖动');

            console.log(event.target.id);

            event.dataTransfer.setData('text/html', event.target.id); // 传递id值

        };

        // 当拖曳结束时触发

        document.ondragend = function (event) {

            console.log('源对象被拖动结束');

        };

    </script>

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width= , initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 200px;

            height: 200px;

            border: 1px solid red;

            float: left;

            margin: 10px;

        }

        div:nth-child(2) {

            border: 1px solid green;

        }

        div:nth-child(3) {

            border: 1px solid blue;

        }

        p {

            height: 25px;

            background-color: pink;

            line-height: 25px;

            text-align: center;

        }

    </style>

</head>

<body>

    <div id="div1">

        <p id="p1" draggable="true">拖曳内容1</p>

        <p id="p2" draggable="true">拖曳内容2</p>

    </div>

    <div id="div2"></div>

    <div id="div3"></div>

    <script>

        // 当拖曳开始时触发

        document.ondragstart = function (event) {

            console.log('源对象开始被拖动');

            console.log(event.target.id);

            event.dataTransfer.setData('text/html', event.target.id); // 传递id值

        };

        // 当拖曳结束时触发

        document.ondragend = function (event) {

            console.log('源对象被拖动结束');

        };

        // 当源对象进入目标元素时

        document.ondragenter = function (event) {

            console.log('目标对象被源对象拖动着进入');

            console.log(event.target);

        };

        // 当源对象悬停在目标元素上方时触发

        document.ondragover = function (event) {

            console.log('源对象悬停在目标元素上方');

            return false;

        };

        // 当源对象在目标元素上方释放鼠标时

        document.ondrop = function (event) {

            console.log('上方释放/松手');

            var id = event.dataTransfer.getData('text/html');

            event.target.appendChild(document.getElementById(id));

        };

    </script>

</body>

</html>

【前端】【H5 API】拽托的更多相关文章

  1. H5拖拽 构造拖拽及缩放 pdf展示

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  2. H5 拖拽读取文件和文件夹

    1)拖拽方面的重点是:ondragover 事件 和 ondrop 事件 ondragover 是必须的,ondragover 事件里禁用掉 html 的默认事件,否则 ondrop 事件将无效(直接 ...

  3. H5拖拽 构造拖拽及缩放 pdf文件转换为html预览

    前言: 协助项目需要实现一个签名的功能. 功能说明:1.有文本签名和头像签名.2.头像签名需要实现可拖拽功能.3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置. 功能一:实现拖拽 思 ...

  4. H5 拖拽操作

    H5 拖拽操作 前言 在原生H5中,可以通过提供的api实现在网页内元素的拖拽操作.相对于传统的写法更加的简单. 而想要实现拖拽,主要需要进行两个方面的工作,第一是给元素设置draggable='tr ...

  5. Qt开发技术：Qt拽拖开发（一）拽托框架详解及Demo

    前话   Qt中的拽拖操作详细介绍.   Demo 图片拽拖    控件拽拖    窗口拽拖    拽托框架(高级开发)        拖放(Drag and Drop)   拖放提供了一种简单的可视 ...

  6. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

  7. 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

  8. python为前端提供API

    作为一名前端来学习后端语言,有难度啊.这里把第一次尝试的过程做个记录 1.网上看到Python给前端提供API可以使用python的flaskweb框架 #py文件 import json from ...

  9. h5拖拽上传图片

    h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...

  10. 移动前端—H5实现图片先压缩再上传

    在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...

随机推荐

  1. Windows下使用Wireshark分析USB通信

    WireShark中对USB数据捕获 可以监视与主机连接的usb数据. usb设备是三段地址描述,例如1.15.1,第一个是总线,第二个是设备地址,第三个是端口. USB数据抓包分析 这些是鼠标的数据 ...

  2. USB 同步字段中高速同步字段和低速全速同步字段的区别

    USB(Universal Serial Bus)有几种不同的传输模式:低速(Low-Speed).全速(Full-Speed).高速(High-Speed)和超级速度(SuperSpeed).同步字 ...

  3. yarn 命令大全

    npm install yarn -g npm install --global yarnyarn 中文网:https://yarn.bootcss.com/docs/install/#windows ...

  4. 6.flask 源码解析：响应

    目录 一.flask 源码解析:响应 1.1 response 简介 1.2 flask 响应(response) 1.3 werkzeug response 1.4 自定义 response Fla ...

  5. EBS GL 当前职责有访问权限的所有账套

    CREATE OR REPLACE VIEW CUX_GL_ACCESS_LEDGER_V AS SELECT L.LEDGER_ID,L.NAME,L.LEDGER_CATEGORY_CODE FR ...

  6. 云原生爱好者周刊：长得最像苹果的 Linux 桌面

    云原生一周动态要闻 SUSE 发布 Harvester 0.2.0 IBM 收购容器服务提供商 BoxBoat Kubernetes 和云原生运营报告 2021 发布 适用于 Kubernetes 的 ...

  7. 欢迎体验程序员Lingma的助攻手

    如果你是一位软件开发者,(同义灵码)Lingma可以帮助你做基础架构的脚手架相关工作事宜以及部分代码开发,对比之前没有灵码,现在提效了她可以给予你零编码的快感,准确快速地读懂了你我的需求,例如答问场景 ...

  8. HEU KMS：一款超稳的MS Windows激活工具

    HEU KMS ACTIVATOR是一款功能齐全的免费Windows和Office系列激活工具. 打开程序,一步到位.直接点击开始就可以准备激活,Windows11/10乃至更早的版本都可以通用,顺带 ...

  9. hasOwnProperty()方法

    hasOwnProperty()方法可以检测对象是否有某个属性 var man = { legs:2, hands:2, heads:1 } man.hasOwnProperty("head ...

  10. (待续) 强化学习——如何提升样本效率 （ DeepMind 综述深度强化学习：智能体和人类相似度竟然如此高！）

    强化学习     如何提升样本效率 参考文章: https://news.html5.qq.com/article?ch=901201&tabId=0&tagId=0&docI ...