<!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. 【AHOI2009】中国象棋

    [题目链接] 点击打开链接 [算法] 动态规划 f[i][j][k]表示前i行,有j列放了1个,有k列放了两个 分六种情况讨论即可 [代码] #include<bits/stdc++.h> ...

  2. YUIDoc的使用方法小结

    一.YUIDoc概述以及安装YUIDoc是为YUI Library用来生成HTML版API文档的一系列工具集,文档的生成完全基于JavaDoc风格的代码注释规则.该工具是基于Python语言编写,并且 ...

  3. Bootstrap-CL：按钮组

    ylbtech-Bootstrap-CL:按钮组 1.返回顶部 1. Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Boot ...

  4. bzoj3198

    容斥原理+哈希表 恰好k个,那么上容斥原理,我们先2^6枚举相同的位置,用哈希表判断有多少个对应位置相同的元素,然后用容斥原理计算,似乎这里的容斥没有那么简单,详见这里 http://www.cnbl ...

  5. C. Vanya and Scales

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  6. Redis的相关命令

    Redis的相关命令 redis程序的命令 /usr/bin/redis-benchmark /usr/bin/redis-check-aof /usr/bin/redis-check-rdb /us ...

  7. easyui 动态添加标签页，总结

    步骤 1:创建 Tabs <div style="margin-bottom:10px"> <a href="#" class="e ...

  8. XCode10 swift4.2 适配遇到的坑

    以下是2018年10月23日更新 经过大约一个月的时间的适配,项目正式使用XCode10(以下简称为10 or XC10)大部分库都升级为Swift4.2(以下简称为 4.2 or S4.2),下面是 ...

  9. android调用第三方库——第二篇——编写库android程序直接调用第三方库libhello.so （转载）

    转自:http://blog.csdn.net/jiuyueguang/article/details/9449737 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言 1:本文主要作为 ...

  10. FrameLayout 的使用方法

    一.FrameLayout介绍 FrameLayout帧布局是最简单的布局之一,采用帧布局的容器中无论放入多少个控件,控件默认情况下左上角都对齐到容器的左上角,如果控件一样大,同一时间只能见到最上面的 ...