菜鸟教程学习——HTML5 拖放

无解释，纯代码示例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></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>拖动图片到矩形框中:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"></body>
</html>

运行截图，菜鸟网站：

来回拖放：只需要多写一个可以存放元素的div；

代码详细解释：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}#div2 {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);//被拖数据是被拖元素的 id ("drag1")}function drop(ev)//当放置被拖数据时，会发生 drop 事件。{ev.preventDefault();//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）var data=ev.dataTransfer.getData("Text");//设置被拖数据的数据类型和值//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素（目标元素）中}</script></head>
<body><p>拖动 RUNOOB.COM 图片到矩形框中:</p><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<!--当放置被拖数据时，会发生 drop 事件。-->
<!--ondragover规定在何处放置被拖动的数据-->
<br>
<img id="drag1" src="img/meetYou.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69"><!--draggable设置元素为可拖拽--><!--ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据--></body>
</html>

菜鸟教程学习——HTML5 拖放相关推荐

菜鸟教程学习——HTML5 video，audio,input(各种新元素)，output,datalist
<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg:即 MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 ...
菜鸟教程学习——html5 表单
整理自:http://www.runoob.com/html/html5-form-attributes.html 表单中,输入框的内容提交后,仍有记忆:autocomplete=on www.run ...
python菜鸟教程字典-python教程菜鸟教程学习路线
python教程菜鸟教程学习路线,需要学Python 环境搭建.Python 中文编码.Python 基础语法.Python 变量类型.Python 运算符.Python 条件语句.Python 循环 ...
python教程菜鸟教程学习路线
python教程菜鸟教程学习路线,需要学Python 环境搭建.Python 中文编码.Python 基础语法.Python 变量类型.Python 运算符.Python 条件语句.Python 循环 ...
Python基础教程-菜鸟教程学习笔记1
Python基础教程-菜鸟教程学习笔记1 文章目录 Python基础教程-菜鸟教程学习笔记1 前言 Python 简介 1. 第一个Python程序 2. Python 中文编码 3. 基本语法 1) ...
python菜鸟教程学习：数据结构
列表方法 list.append(x):把一个元素添加到列表的结尾,相当于 a[len(a):] = [x]. list.extend(L):通过添加指定列表的所有元素来扩充列表,相当于 a[len( ...
python基础菜鸟教程-菜鸟教程学习python
1.杂货 *items(): 方法以列表返回可遍历的(键, 值) 元组数组. *在序列中遍历时,索引位置和对应值可以使用 enumerate()函数同时得到 *同时遍历两个或更多的序列,可以使用 zi ...
【C#】菜鸟教程学习笔记（二）
前言这部分似乎依然是跟C++差不多的内容,不过鉴于我之前一直在写套着C++外皮的C--这部分内容还是稍微复习一下吧(心虚) 十.C#封装封装: 把一个或多个项目封闭在一个物理的或者逻辑的包中.在面 ...
【C#】菜鸟教程学习笔记（一）
假装是个前言教程链接:http://www.runoob.com/csharp/csharp-tutorial.html 学C#主要是为了写Unity的脚本,由于之前已经学过C和C++了,这里仅记录 ...

菜鸟教程学习——HTML5 拖放

菜鸟教程学习——HTML5 拖放相关推荐

最新文章

热门文章