拖曳操作需要借助于鼠标来实现，如文件或图片的移动操作等。在开发中，我们经常使用原生的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. 腾讯自研Git客户端，助力每个人都可以轻松使用Git

    工具介绍 UGit是一款腾讯自研的Git客户端,为了让每个人都可以轻松使用Git,从而提高开发效率和团队协作的流畅性.支持工蜂MR/CR,工蜂议题管理,另外对于Git的原生特性有着深度支持. 支持的系 ...

  2. Linux进程调度-组调度及带宽控制

    1. 概述 组调度(task_group)是使用Linux cgroup(control group)的cpu子系统来实现的,可以将进程进行分组,按组来分配CPU资源等. 比如,看一个实际的例子: A ...

  3. Java日期时间API系列36-----Jdk8中java.time包中的新的日期时间API类应用，使用LocalTime计算十二时辰。

    十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰.二十四小时和十二时辰对照表:     时辰 时间 24时制 子时 深夜 11:00 - 凌晨 01:00 23:00 - 01 : ...

  4. 6. CSS有哪些方法可以提升层级

    1. 使用 z-index 2. 使用定位,脱离标准流

  5. jenkins 配置flyway报错No value provided for placeholder expressions: ${name}

    业务场景:使用flyway将一个数据库的变更同步到另一个数据库,数据同步到一半的时候报错 No value provided for placeholder expressions: ${name}. ...

  6. python实战-编写请求方法重试（用途：请求重试、也可用于其他场景）、日志、执行耗时、手机号与邮箱校验装饰器

    更新日志 2023.2.9 增加重试装饰器 防止函数原信息被改变使用:@functools.wraps(func)装饰执行函数 # _*_ coding: UTF-8 _*_ "" ...

  7. Linux系统管理-yum源配置

    一.本地光盘yum源配置 1.创建挂载点 [root@localhost ~]# mkdir /mnt/cdrom 2.配置自动挂载本地光盘 [root@localhost ~]# vim /etc/ ...

  8. 无需等待Vue Release发布，就能在项目中体验最新版

    前言 两个月前尤大在Vue 仓库中引入了 pkg.pr.new,有了这个后Vue仓库中的每个commit或者PR都会自动触发一个新的发布,我们就可以在项目中体验最新版本的Vue啦. 关注公众号:[前端 ...

  9. 史上最全 Terraform 入门教程，助你无坑入门！

    在云计算的浪潮中,基础设施管理变得越来越复杂.如何高效地配置和管理云资源,成为了每个开发者和运维工程师必须面对的挑战.Terraform,作为一种强大的基础设施即代码(IaC)工具,为我们提供了一种简 ...

  10. 每日学学Java开发规范，集合处理(附阿里巴巴Java开发手册（终极版）)

    前言 每次去不同的公司,码不同的代码,适应不同的规范,经常被老大教育规范问题,我都有点走火入魔的感觉,还是要去看看阿里巴巴Java开发规范,从中熟悉一下,纠正自己,码出高效,码出质量. 想细看的可以去 ...