<!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. 跨平台实现zip压缩加密功能

    使用zlib将文件夹压缩成zip文件时,需要自己读取文件然后写入zip文件.利用官方下载的zlib包中包含的contrib/minizip/zip.h和zip.c代码提供的函数,可以很容易实现这个功能 ...

  2. (转）Vim自动补全神器：YouCompleteMe

    原文出处:http://blog.jobbole.com/58978/ 第一次听说这个插件还是在偶然的情况下看到别人的博客,听说了这个插件的大名.本来打算在实训期间来完成安装的,无奈网实在不给力,也就 ...

  3. HDU5890:Eighty seven(Bitset优化背包)

    Mr. Fib is a mathematics teacher of a primary school. In the next lesson, he is planning to teach ch ...

  4. [Selenium] Selenium find Element Examples

    ---> 1. By.id  以百度主页为例 <span classs = "bg s_ipt_wr"> <input type = "text& ...

  5. Watir: 应用Watir，调用AutoIT清空IE浏览器的Cookies

    require 'win32ole'ai = WIN32OLE.new("AutoItX3.Control")ai.RunWait("RunDll32.exe InetC ...

  6. bzoj4547

    矩阵乘法 看成了合并果子... 就是斐波那契数列,只是有负数的时候,先把负数变成正的,然后矩乘 矩乘还是用单位举矩阵记录快速幂的矩阵比较保险 #include<cstdio> #inclu ...

  7. A - Mike and Fax

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

  8. Node学习图文教程之express重写留言本案例

    写在前面 小伙伴们大家好,我是你们的pubdreamcc,接着前面的学习,这篇博文出至于我的GitHub仓库:Node学习教程资料,如果你觉得对你有帮助,欢迎star,你们的点赞是我持续更新的动力,谢 ...

  9. Codeforces702A - Maximum Increase【尺取】

    题意: 求一个连续的最长子序列长度: 思路: 没看仔细还wa1了-以为LIS- 然后写了尺取吧...= =太不仔细了.不过收获是LIS特么写挫了然后看了学长的blog<-点我- 题目的挫code ...

  10. hdoj5301

    题意: 有一个n*m的大矩阵, 其中有一个1*1的不要的位置(x,y), 然后用若干个小矩阵去覆盖大矩阵, 不要的不能被覆盖. 问小矩阵中面积最大的面积最小是多少. 思路: 巨巨先画一个矩形,看看那个 ...