<!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. 读取文件中的每行数据，并且存入到list中

    有一个txt文件,每行都有数据,将每行的数据转换成list列表 例如: 5,6,7,8,1 9,1,3,4 如下实现: f = open('test1.txt','r') for i in f.rea ...

  2. Bootstrap-CSS：按钮

    ylbtech-Bootstrap-CSS:按钮 1.返回顶部 1. Bootstrap 按钮 本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角 ...

  3. JavaScript-Tool：jquery.tree.js-un

    ylbtech-JavaScript-Tool:jquery.tree.js 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.jst ...

  4. UI：一个IOS工程的标准框架

    来自cocachina 的写法 参考 声明:本文来自互联网,非本人原创,仅供参考学习使用. 我的iOS工程结构 接下来,我就简单介绍下我做iOS项目时使用的工程结构.首先要说的是,这只是我的工程结构, ...

  5. maven+springmvc+spring+mybatis+mysql详细搭建整合过程讲解

    转自:https://www.cnblogs.com/lmei/p/7190755.html?utm_source=itdadao&utm_medium=referral @_@ 写在最前 之 ...

  6. B - Soldier and Badges

    Time Limit:3000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description Colone ...

  7. 一些好用的Linux命令组合

    1.删除0字节文件 代码如下: find -type f -size 0 -exec rm -rf {} \; 2.查看进程按内存从大到小排列 代码如下: ps -e -o "%C : %p ...

  8. 51nod1014【暴力】

    直接暴力1e6就好了 #include <bits/stdc++.h> using namespace std; typedef long long LL; int main() { LL ...

  9. vector理解一波~~~

    Vector: 头文件: #include<vector> using namespacestd; 定义: vector<类型>q;//类同于  "类型 q[];&q ...

  10. python 元类 type metaclass

    python中一切皆对象,类对象创建实例对象,元类创建类对象,元类创建元类. 元类创建类对象有2中方式: 一.type方法 type(类名, 由父类名称组成的元组(针对继承的情况,可以为空),包含属性 ...