<!DOCTYPE HTML>

<html>

    <head>

        <style type="text/css">

            #div1 {

                width: 300px;

                height: 160px;

                padding: 10px;

                border: 1px solid #aaaaaa;

            }

        </style>

        <script type="text/javascript">

            //放到何处 - ondragover

            function allowDrop(ev) {

                ev.preventDefault();//drop事件的默认行为是以链接形式打开

            }

            //拖动什么 - ondragstart 和 setData()

            function drag(ev) {

                ev.dataTransfer.setData("Text", ev.target.id);//dataTransfer.setData() 方法设置被拖数据的数据类型和值

            }

            //进行放置 - ondrop

            function drop(ev) {

                ev.preventDefault();

                var data = ev.dataTransfer.getData("Text");

                ev.target.appendChild(document.getElementById(data));

            }

        </script>

    </head>

    <body>

        <p>请把下面的图片拖拽到上面的矩形里面</p>

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

        <br />

        <img id="drag1" src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=1402111932,1875120122&fm=202&mola=new&crop=v1" draggable="true" ondragstart="drag(event)" />

    </body>

</html>

draggable 属性规定元素是否可拖动（HTML5 新增）
语法：<element draggable="true|false|auto">
true //规定元素是可拖动的。
false //规定元素是不可拖动的。
auto //使用浏览器的默认特性。

H5拖拽事件的完整过程和语法的更多相关文章

  1. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

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

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

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

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

  4. H5 拖拽操作

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

  5. H5 拖拽元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  7. h5拖拽上传图片

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

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

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

  9. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

随机推荐

  1. Python学习笔记_Mysql数据库、Excel

    一.操作mysql数据库 import pymysql # 1.连上数据库:账号,密码,ip,端口号,数据库 # 2.建立游标(去数据库拿东西的工人) # 3.执行sql # 4.获取结果 # 5.关 ...

  2. CTR预估经典模型总结

    计算广告领域中数据特点:    1 正负样本不平衡    2 大量id类特征,高维,多领域(一个类别型特征就是一个field,比如上面的Weekday.Gender.City这是三个field),稀疏 ...

  3. Python-day-9- RabbitMQ队列

    RabbitMQ队列 安装 http://www.rabbitmq.com/install-standalone-mac.html 安装python rabbitMQ module pip insta ...

  4. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  5. linux设备驱动第三篇：如何实现一个简单的字符设备驱动

    在linux设备驱动第一篇:设备驱动程序简介中简单介绍了字符驱动,本篇简单介绍如何写一个简单的字符设备驱动.本篇借鉴LDD中的源码,实现一个与硬件设备无关的字符设备驱动,仅仅操作从内核中分配的一些内存 ...

  6. 量子纠缠2——CHSH不等式

    问题 有Alice和Bob两个人,随机给他们两个数x和y(0或1),然后A和B根据他们得到数(x和y)给两个个数a和b(0或1). 规则如下: 如果输入的x和y都是1,那么,Alice和Bob给出不一 ...

  7. 任务41：Individual authentication 模板

    使用命令行创建项目 会自动加上ef core和Identity core代码的示例 默认创建mvc是不带Identity的 dotnet new -help:查看可用的命令: -au:Individu ...

  8. IT兄弟连 JavaWeb教程 Servlet

    Servlet的定义 Java Servlet是运行在Web服务器或应用服务器上的程序,它是作为来自Web浏览器或其他HTTP客户端的请求和HTTP服务器上的数据库或应用程序之间的中间层. 使用Ser ...

  9. LuoguP2115 [USACO14MAR]破坏Sabotage【二分答案】By cellur925

    本来是想找一道生成树的题做的...结果被洛咕的标签骗到了这题...结果是二分答案与生成树一点mao关系都没有.... 题目大意:给你一个序列,请你删去某一个$l~r$区间的值($2<=i< ...

  10. NOIp2005 过河【dp+离散化】By cellur925

    题目传送门 $30pts$ 状态和转移都比较好想:设$f[i]$表示跳到$i$位置,踩到的最小石子数.转移方程也很明了,为$f[i]$=$min${$f[i-j]$),,这个位置有石子时答案再加1,$ ...