Html——拖放
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true" />
拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代码解释：
- 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
- 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
- 被拖数据是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目标元素）中
实例
<!DOCTYPE html>
<html>
<head>
<title>Html5 拖放</title>
<style type="text/css">
#div1 {
width: 488px;
height: 300px;
padding: 10px;
border: 2px solid blue;
}
</style>
<script type="text/javascript">
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function allowDrop(ev) {
ev.preventDefault();
}
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" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<br>
<img id="drag1" alt="w3c图片" src="../images/dog.bmp" draggable="true"
ondragstart="drag(event)">
</body>
</html>
来回拖放图片
<!DOCTYPE html>
<html>
<head>
<title>来回拖放图片</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
margin: 10px;
padding: 20px;
border: 2px solid;
margin: 10px;
}
#div1 {
border-color: red;
}
#div2 {
border-color: blue;
}
</style>
<script type="text/javascript">
function drag(ev) {
ev.dataTransfer.setData("dragId", ev.target.id);
//alert("dd:"+ev.dataTransfer.getData("dragId"));
}
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("dragId");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>在两个方框中任意拖放狗狗：</p>
<div id="div1" ondragover="allowDrop(event)" ondrop="drop(event);">
<img id="img1" alt="狗狗图片" src="../images/dog.bmp" draggable="true"
ondragstart="drag(event)">
</div>
<div id="div2" ondragover="allowDrop(event)" ondrop="drop(event);"></div>
</body>
</html>
Html——拖放的更多相关文章
- HTML5_06之拖放API、Worker线程、Storage存储
1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象: var 全局变量=null; src.ondragstart=function(){ 全局变量=数据值; ...
- HTML5_05之SVG扩展、地理定位、拖放
1.SVG绘图总结: ①方法一:已有svg文件,<img src="x.svg"> 方法二:<body><svg></svg>&l ...
- HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
1.标签元素更加语义化 2.内容类型仍然为“text/html” 扩展符仍然为html或者htm. <1>DOCTYPE 声明<!DOCTYPE html>就可 ...
- HTML5 之拖放(drag与drop)
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例 ...
- 深入理解javascript原生拖放
× 目录 [1]拖放源 [2]拖放目标 [3]dataTransfer对象[4]改变光标 前面的话 拖放(drag-and-drop,DnD)其实是两个动作——拖和放.所以,它涉及到两个元素.一个是被 ...
- 炫酷的html5（Drag 和 drop）拖放
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放.也是一种常见的特性,即抓取对象以后拖到另一个位置. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.C ...
- 基于jquery实现图片拖动和曲线拖放
功能:图片的拖动.曲线的拖放和绘制 一. 准备工作 1. 点击此下载相关的文档 二. 在浏览器中运行 dragDrop.html 文件,即可看到效果 三. 效果图
- html 5 实现拖放效果
在html5中要实现拖放操作,相对于以前通过鼠标操作实现,要简单得多,数据安全性也更有保障.只需要以下几步即可. 给被拖拽元素添加draggable属性,如果是文件拖放. 在拖拽元素的dragstar ...
- 【Win10应用开发】通过拖放来打开文件
除了可以使用XXXFilePicker来浏览文件外,其实在UWP APP中,也可以向传统Windows窗口一样,通过拖放的方式来打开文件. 处理过程和WPF的原理差不多,毕竟都是一脉相承,于是,在学习 ...
- Vue.js学习笔记（8）拖放
小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...
随机推荐
- Tensorflow 笔记
TensorFlow笔记-08-过拟合,正则化,matplotlib 区分红蓝点 TensorFlow笔记-07-神经网络优化-学习率,滑动平均 TensorFlow笔记-06-神经网络优化-损失函数 ...
- 将数组A中的内容和数组B中的内容进行交换。（数组一样大）
将两个数组中的内容相互交换,必须是两个数组的内容一样大小. 思路: 结合两个整型变量之间的交换,同样可以用于内容一样大的数组.用异或关系相互交换. #include<stdio.h> in ...
- 【HI3520DV200】sample
1.vdec不支持1280x720,支持640x480及以下
- day5 大纲
01 昨日内容回顾 list: 增: append insert(index,object) extend() 迭代着追加 删: pop(默认删除最后一个)按照索引去删除 有返回值 remove 按照 ...
- MySQL 术语
MySQL 术语: MySQL 术语 含义 B-树 英文:Balance Tree:读音:B树(中间的横线,是分隔符的意思:注意:不读"B减树")
- hadoop 常见 命令
一 hadoop namenode 命令 1 格式化namanode 磁盘 hadoop namenode -format 二 hadoop fs 命令 和 linux 命令 非常类似 ...
- hdfs 例子
package hadoop; import java.io.IOException; import java.net.URI; import java.net.URISyntaxException; ...
- redmine一键安装（项目管理、Bug管理、任务跟踪、代码管理、日报等等）
1,下载一键安装包(64位系统) https://bitnami.com/stack/redmine 2,帮助文档(安装引导) http://www.360doc.com/content/15/033 ...
- python re 实例
#!/usr/bin/env python#_*_coding:utf-8_*_ import reimport timeimport jsonimport MySQLdbimport context ...
- MIME 设置
1,打开iis7,选择你要设置网站,打开mime类型选项 2,找到.rar的mime类型,复制他的类型 3,复制后选项添加,在文件扩展名那一栏填入.*,然后在下面的mime类型复制你刚复制的appli ...