拖曳操作需要借助于鼠标来实现，如文件或图片的移动操作等。在开发中，我们经常使用原生的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. iOS中在导航条设置搜索框使用小结

    最近在项目开发中用到了搜索框,一般是设置在列表顶部或者导航条上.下面说一下在导航条上使用搜索框的思路,刚开始是直接将CCSearchBar添加到导航条,在viewWillDisappear设置隐藏,在 ...

  2. WPF-超市管理系统

    1. 新建 WPF APP (net framework )项目

  3. 修复 K8s SSL/TLS 漏洞（CVE-2016-2183）指南

    前言 测试服务器配置 主机名 IP CPU 内存 系统盘 数据盘 用途 zdeops-master 192.168.9.9 2 4 40 200 Ansible 运维控制节点 ks-k8s-maste ...

  4. DRF-Version组件源码分析

    1. 版本管理组件源码分析 注意点: 不同的versioning_class区别:实例化后得到的对象versioning_scheme里面的方法不同(函数同名,但是处理逻辑不同) def determ ...

  5. Ubuntu 22.04 LTS 在线/离线安装 Docker

    Docker 安装方式 时间:2024-10 准备环境 root@ubuntu2204:~# hostnamectl Static hostname: ubuntu2204 Icon name: co ...

  6. SSIS ODBC方式连接mysql数据库

    系统环境:WIN 10 64位 1.安装Mysql odbc connector 插件 文章说明链接: https://www.cnblogs.com/santiagoMunez/p/4780301. ...

  7. Expo上手

    RN中文网:https://reactnative.cn/docs/next/native-modules-android RN路由:https://reactnavigation.org/docs/ ...

  8. Andrew 算法求凸包

    Andrew 算法求凸包 参考资料: 右手定则(baidu.com) 内积和外积 - OI Wiki (oi-wiki.org) \(a\) 与 \(b\) 相对位置 \(b\) 在 \(a\) 的逆 ...

  9. dateFormater：格式化时间

    function dateFormater(formater, t){ let date = t ? new Date(t) : new Date(), Y = date.getFullYear() ...

  10. CommonsCollections2（基于ysoserial）

    环境准备 JDK1.8(8u421)这里ysoserial,我以本地的JDK8版本为准.commons-collections4(4.0 以ysoserial给的版本为准).javassist(3.1 ...