参考链接: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. docker删除未使用到的镜像

    docker image prune -a docker image prune -a -f  #-f强制,不需要确认

  2. 5020: [THUWC 2017]在美妙的数学王国中畅游

    传送门 当年听llj讲的时候觉得这简直是个不可做的神题． 现在看来并不是很神,可能是我已经被剧透了的缘故．．． 一开始以为是函数套函数,懵蔽了好久,结果只是求和 被剧透了泰勒展开就比较水了．．只要你不 ...

  3. namespace 命名空间

    namespace作用:资源隔离 当我们不指定namespace时,默认放在default下 创建namespace kubectl create namespace 资源名称 在生产中,我们建议一个 ...

  4. 2 _ 基本框架 _ 检测VMX环境

    VT 是先开为大,谁先开谁上层,谁上层 谁权限大. 1 判断是否支持 VMX intel 白皮书 第3卷 传入 参数eax =1, 返回值 ecx 的第5位 = 1 则 surpported VMX. ...

  5. linq学习（第二部分）

    8.匿名方法 (1)源起 在上面的例子中 为了得到序列中较大的值 我们定义了一个More方法 var d1 = new Predicate<int>(More); 然而这个方法,没有太多逻 ...

  6. Matlab神经网络验证码识别

    本文,将会简述如何利用Matlab的强大功能,调用神经网络处理验证码的识别问题.  预备知识,Matlab基础编程,神经网络基础.  可以先看下: Matlab基础视频教程 Matlab经典教程--从 ...

  7. 洛谷P2325 [SCOI2005]王室联邦

    P2325 [SCOI2005]王室联邦 题目描述 "余"人国的国王想重新编制他的国家.他想把他的国家划分成若干个省,每个省都由他们王室联邦的一个成员来管理. 他的国家有n个城市, ...

  8. C++ 系列：static

    C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用.一.面向过程设计中的sta ...

  9. springboot导入excel到mysql

    @Controller @RequestMapping(path = "/excel") public class ImportController { @Autowired pr ...

  10. Ajax4Jsf 简单介绍

    Ajax4jsf 允许开发人员将 Ajax 功能添加到 JSF 应用程序中,而不需要 JavaScript 或用 Ajax 图形部件替换现有的组件.这个包还允许在使用 Java 2D 库时动态地生成图 ...