<!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. Ural 1109 Conference（最小路径覆盖数）

    题意:A国家有M个代表,B国有N个代表,其中有K对代表可以进行谈判(一个是A国的,一个是B国的),并且每一个代表至少被包含在其中一对中(也就是说,每个人可以至少找到另外一个人谈判),每一对谈判需要一对 ...

  2. Python机器视觉编程常用数据结构与示例

    本文总结了使用Python进行机器视觉(图像处理)编程时常用的数据结构,主要包括以下内容: 数据结构 通用序列操作:索引(indexing).分片(slicing).加(adding).乘(multi ...

  3. 【hdu 4374】One Hundred Layer

    [题目链接] 点击打开链接 [算法] 不难看出,这题可以用动态规划来解决 f[i][j]表示第i行第j列能够取得的最大分数 则如果向右走,状态转移方程为f[i][j]=max{f[i-1][k]+a[ ...

  4. java链接sqlserver数据库

    需要用到sqljdbc.jar包 JSP代码 <%@ page language="java" import="java.sql.*" import=&q ...

  5. Unity3D4.* NGUI制作动态字库

    新建一个工程,这个工程必须没有中文路径,否则会不识别字体!!! 首先导入NGUI插件,这里我用的是NGUI 3.0.2版本的. 在Assets 下创建一个文件夹,用来存放接下来的工作文件 . 这里随便 ...

  6. CodeForces 1103C. Johnny Solving

    题目简述:给定简单(无自环.无重边)连通无向图$G = (V, E), 1 \leq n = |V| \leq 2.5 \times 10^5, 1 \leq m = |E| \leq 5 \time ...

  7. 交表（Send a Table）

    #include<stdio.h> #include<string.h> #define N 50010 int phi[N],n,sum[N]; void phi_table ...

  8. 关于long long int和__int64用%I64d和%lld输出在不同编译语言下的正确性

    http://blog.csdn.net/febr2/article/details/52068357 这个网址最下面

  9. 模拟赛01 T3 盖房子

    题面 http://zhengruioi.com/problem/248 题解 三重容斥(说是两重也行吧) 我们来看题目的约束 ①有k个位置不能放(k≤8) ②每行每列至少一个 ③正负对角线至少一个 ...

  10. 491 Increasing Subsequences 递增子序列

    给定一个整型数组, 你的任务是找到所有该数组的递增子序列,递增子序列的长度至少是2.示例:输入: [4, 6, 7, 7]输出: [[4, 6], [4, 7], [4, 6, 7], [4, 6, ...