拖曳操作需要借助于鼠标来实现，如文件或图片的移动操作等。在开发中，我们经常使用原生的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. 如何使用hardware breakpoint

    要使用内核的硬件断点(hardware breakpoint)来定位内核模块中的内存访问问题,你可以通过以下步骤进行设置和调试. 1. 确定要监控的内存地址 首先,你需要确定你想要监控的内存地址.这可 ...

  2. 我对CMD 和 AMD 的理解 ？

    都是模块规范,和 CommonJs 一样都是社区规范,ES-module 才是官方规范,而且官方规范是趋势 : AMD:Asynchronous Module Definition  异步模块定义,即 ...

  3. Android复习(三)清单文件中的元素

    <action> 向 Intent 过滤器添加操作. <activity> 声明 Activity 组件. <activity-alias> 声明 Activity ...

  4. 锁的分类和JUC

    锁的分类 乐观锁.悲观锁 对于同一个数据的并发操作,悲观锁认为自己在使用数据的时候一定有别的线程来修改数据,因此在获取数据的时候会先加锁,确保数据不会被别的线程修改.Java 中,synchroniz ...

  5. Top100（中）

    Top100(中) 二叉树 94. 二叉树的中序遍历 int *res; void inorder(struct TreeNode *root, int *returnSize) { if (root ...

  6. C语言实战项目——学生试卷分数统计

    1.题目要求 作为教师,考试以后对试卷进行分析和研究是必须做的一项工作,假定某学校要求老师在考试之后填写的一个表格,并要求教师根据考试分数分布情况画出直方图.下面就来解决这个实际问题. 2.题目分析 ...

  7. Python面向对象小备忘

    最近学到面向对象了,感觉到Python这方面的语法也有点神奇,这里专门归纳一下Python面向对象中我觉得比较重要的笔记. 本文目前有的内容:实例属性和类属性的访问,使用@property修饰器 实例 ...

  8. 周六晚11实习生上线数据观测突发问题(涉及MYSQL,Hive等)

    前提 有点恐怖,上次需求上线后,部分线上数据观测要留到11月初,上次是一个税收相关的需求,已有功能的线上数据观察已经完成,还剩下部分只有在十一月初才可以观察 简单提一嘴(非技术相关) 之前把hive ...

  9. Python随笔之英雄联盟皮肤、炫彩爬取练习

    翻了网上爬皮肤的帖子,很多都是爬英雄的皮肤,没有获取到炫彩皮肤的文件 以下代码就是先获取所有的英雄id,再拼接成新的链接再遍历 把获取到的数据保存CSV文件到本地 (之前从事过游戏账号交易行业,还有很 ...

  10. 腾讯云禁止root用户登录

    背景 买了腾讯云的云主机服务,装的 OpenCloudOS 系统,结果没几天就提示异常登录和恶意文件.结果还改了我的密码,导致我xshell登陆不了,通过腾讯云后台登进去发现有挖矿病毒,但还没完全跑起 ...