参考链接: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. thinkphp 异常处理

    和PHP默认的异常处理不同,ThinkPHP抛出的不是单纯的错误信息,而是一个人性化的错误页面,如下图所示: 只有在调试模式下面才能显示具体的错误信息,如果在部署模式下面,你可能看到的是一个简单的提示 ...

  2. 树形dp——cf1092F

    被傻逼题降智了.. 就是第一次dfs 时 求一次size,一次deep数组 然后第二次dfs时直接求最大值 先把结点1的值求出来, u->v过程中,v子树的所有结点深度-1,v外的所有结点深度+ ...

  3. duilib教程之duilib入门简明教程17.事件处理和消息响应

    界面的显示方面就都讲完啦,下面来介绍下控件的响应.    前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEGIN_ME ...

  4. Django项目：堡垒机(Linux服务器主机管理系统)--03--03堡垒机在Linux系统里记录会话日志02/02

    #main.py #本文件写所有的连接交互动作程序 # ————————————————03堡垒机在Linux系统里记录会话日志 开始———————————————— from Fortress im ...

  5. SpringCloud及其五大常用组件之Eureka和Zuul

    1.springcloud简介 SpringCloud是Spring旗下的项目之一,它是微服务架构的一种实现方式. 官网地址:http://projects.spring.io/spring-clou ...

  6. springMVC 400 错误

    1. 今天发现一个奇葩的问题, springMVC出现400错误, 查了很久发现是因为一个参数为int型,而前台传得是String. 这是bug么.

  7. zepto问题

    jq功能对照表 http://jsrun.it/21f/mrCH 不支持 jquery的 ajaxSetup 全局修改ajax的设置 $.ajaxSetup({beforeSend : beforeS ...

  8. 解决div设置浮动，高度消失

    给包围 浮动的层 加清除浮动样式,样式要兼容的用下面的代码.clearfix {*zoom:1; clear:both;}.clearfix:after{content:".";d ...

  9. 按指定规则统计list中数据，groupby用法

    有的情况下,只是想要简单地对list中数据,进行分组,查看,可以考虑使用groupby 代码: # groupby需要排序后才能使用 def gb(num): if 0 <= num < ...

  10. ">/dev/null 2>&1 "是什么意思

    在Linux中: 0:表示键盘输入(stdin) 1:表示标准输出(stdout),系统默认是1 2:表示错误输出(stderr) shell命令:command >/dev/null  2&g ...