参考链接: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. 【转载】Abstract Factory Step by Step --- 抽象工厂

    抽象工厂是创建型模式的代表,其他的还有单件(Singleton).生成器(Builder).工厂方法(Factory Method)以及原型(Prototype),模式本身没有好坏之分,只有适用不适用 ...

  2. 0704 Process继承实现多进程、Pool进程池，进程间通过队列通信，Pool实现多进程实现复制文件

    通过继承的方式,实现Process多进程 from multiprocessing import Process import time class MyNewProcess(Process): de ...

  3. QueryList 来做采集

    示例代码 先来感受一下使用 QueryList 来做采集是什么样子. 1 采集百度搜索结果列表的标题和链接.大理石平台价格 采集代码: $data = QueryList::get('https:// ...

  4. go操作空指针导致supervisor进程服务挂机的坑

    一.起因 在数据库中直接手动插入了某条记录,但由于该记录的某个字段的空值,与另一个字段的状态码不符合,在go程序中,突然操作了该空字段的指针,导致程序panic挂机. panic: runtime e ...

  5. centos7 创建桌面快捷方式（chrome，eclipse）

    在将eclipse-SDK-3.7.2-Linux-gtk.tar.gz解压到某个目录下之后,命令行进行如下编辑 vi /usr/share/applications/eclipse.desktop ...

  6. 云-腾讯云-短信：短信（SMS）

    ylbtech-云-腾讯云-短信:短信(SMS) 快速稳定.简单易用.触达全球的短信服务,支持国内短信.语音短信与国际短信 1.返回顶部 1. 腾讯云短信 SMS 简介 腾讯云短信(Short Mes ...

  7. C#实现语音

    .net 4.0开始 Type type = Type.GetTypeFromProgID("SAPI.SpVoice"); dynamic spVoice = Activator ...

  8. [kuangbin带你飞]专题一 简单搜索 - D - Fliptile

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...

  9. Window中在Intellij idea开发时常用快捷键

    以下idea中的快捷键是在window 7中确认过,如果快捷键不起作用,可能是该快捷键被其它软件占用,或系统不同导致. 1.Ctrl + Z:撤回代码: 2.Ctrl + Shift + Z:恢复撤回 ...

  10. 4_2.springboot2.x配置之springmvc自动配置

    1.Spring MVC auto-configuration 查看官方文档: Spring Boot为Spring MVC提供了自动配置,适用于大多数应用程序. 自动配置在Spring的默认值之上添 ...