参考链接:https://segmentfault.com/a/1190000013606983

例子：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style type="text/css">

#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}

</style>

<script>

function allowDrop(ev)

{

    ev.preventDefault();

}

function drag(ev)

{

    ev.dataTransfer.setData("Text",ev.target.id);

}

function drop(ev)

{

    ev.preventDefault();

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

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

}

</script>

</head>

<body>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>

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

<br>

<img id="drag1" src="https://www.runoob.com/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>

</html>

注意：

drop 是拖放结束的目标区域，要先把dragover的默认事件禁止才能出发drop事件

HTML5 drag拖动事件的更多相关文章

  1. html5 drag api详解

    可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 di ...

  2. HTML5 元素拖动 - 实现元素左右拖动， 或更改自身排序

    1.拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持:Int ...

  3. H5拖动事件复习

    定义和用法 ondrag 事件在元素或者选取的文本被拖动时触发. 拖放是 HTML5 中非常常见的功能. 更多信息可以查看我们 HTML 教程中的 HTML5 拖放. 注意: 为了让元素可拖动,需要使 ...

  4. [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)

    人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...

  5. js(鼠标键盘拖动事件)

    拖动事件是h5(HTML5的) 1:draggable(true) 2:拖动源 ondragstart ,ondragend 3:目的地 ondraglenter,ondragover,ondragl ...

  6. HTML5的拖放事件

    1.给标签添加属性draggable=ture即可允许拖放,有些标签可以不加,例如img有图片.a有url,默认拥有拖放功能 2.事件在被拖动元素上触发 ondragstart ondrag ondr ...

  7. Html5 drag&drop

    下面是一个拖放例子 定义如下的两个div,分别是用于拖放后放置新元素的容器和可拖动的元素: <body> <div id="holder" style=" ...

  8. Android长按及拖动事件探究

    Android中长按拖动还是比较常见的.比如Launcher中的图标拖动及屏幕切换,ListView中item顺序的改变,新闻类App中新闻类别的顺序改变等.下面就这个事件做一下分析. 就目前而言,A ...

  9. H5案例分享：html5重力感应事件

    html5重力感应事件 一.手机重力感应图形分析 1.设备围绕z轴的旋转角度为α,α角度的取值范围在[0,360). 设备在初始位置,与地球(XYZ)和身体(XYZ)某个位置对齐. 设备围绕z轴的旋转 ...

随机推荐

  1. web Magic报错 NoSuchMethodError NoSuchMethodError: com.google.common.util.concurrent.SimpleTimeLimiter

    webMagic使用selenium的时候遇到报错: java.lang.NoSuchMethodError: com.google.common.util.concurrent.SimpleTime ...

  2. VS2010-MFC（工具栏：工具栏的创建、停靠与使用）

    转自:http://www.jizhuomi.com/software/217.html 上一节教程讲了工具栏资源及CToolBar类,本节继续讲解工具栏的相关知识,主要内容包括工具栏的创建.停靠与使 ...

  3. laravel请求处理管道例子

    例子: <?php interface Middleware{ public static function handle (Closure $next);} class VerifyCsrfT ...

  4. Day 8 : Python 文档操作

    Python 文件的操作方法: 打开文件 f = open('test','r',encoding='utf-8') #f :文件句柄 #test:文件绝对路径 #r:打开方式 #encoding 打 ...

  5. Python sort()函数和sorted()

    1.原址排序 1)列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不可修改的. truple无组报错: 2.副本排序 1)[:]分片方法 注意: ...

  6. 《初识Python之认识常量type函数》

    <初识Python之认识常量type函数> 1.2 认识常量 1.常量:我们用的就是它字面意义上的值或内容. 2.数字(Number) (1)整数表示:97. (2)浮点数表示:5.29 ...

  7. php非法输入数据类型

    1.空白输入 2.超长输入(如大于256个字符) 3.特殊字符(如·!@#￥%……&*()—=|.:‘:<>;'"<>?.,) 4.控制字符(如\r\n等) ...

  8. EasyNetQ异常处理

    代码下载 https://download.csdn.net/download/u010312811/11252093 官方Demo https://github.com/EasyNetQ/EasyN ...

  9. reg命令详解

    reg命令是Windows提供的,它可以添加.更改和显示注册表项中的注册表子项信息和值. 1,reg add 将新的子项或项添加到注册表中  语法:reg add KeyName [/v EntryN ...

  10. Linux下常用操作

    ************************ 镜像操作 ************************************* screen -s name 新建 screen -r name ...