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再通过小颖写的方法, ...
随机推荐
- 使用InternalsVisibleToAttribute给assembly添加“友元assembly”特性遭遇"强签名"
一.如何让Intenal成员暴露给另一个程序集 我们知道Modifier为Internal的类型成员仅限于当前程序集能够访问,但是在某些情况下,我们希望将它们暴露给另一个程序集.比较典型的应用场景包括 ...
- Ts基础
//typeof 用来判断变量类型 var s: string = 'egret'; var isString: boolean = typeof s === 'string'; console.lo ...
- 打印N个数的循环算法和递归算法比较
1.循环算法: void PrintN_1(int N) { int i; ; i <= N; i++) printf("%d\n", i); return; } N可以为任 ...
- Linux 安装MySql启动Can't locate Data/Dumper.pm in @INC
通过RPM包CentOS7 安装MySQL的时候提示“Can't locate Data/Dumper.pm in @INC (@INC contains: /usr/local/lib64/perl ...
- Apache 配置Https 转发Tomcat Http
Apache 相对于nginx的配置对比起来相当复杂啦,朋友之前的系统使用的是Apache需要增加一个虚拟主机,主要配置从Apache转发Tomcat. 首先需要拆解下步骤: Apache 支持Htt ...
- CoreException: Could not get the value for parameter compilerId for plugin execution default-compile Maven项目pom文件报错，插件引用不到
CoreException: Could not get the value for parameter compilerId for plugin execution default-compile ...
- 动态设置所有string字段不分词
PUT http://192.168.1.12:9200/test { "settings": { "number_of_shards": 3, &qu ...
- jQuery实现点赞动态效果
实现动态效果基本上都是用到定时器,修改标签的位置大小颜色属性 <!DOCTYPE html> <html lang="en"> <head> & ...
- messageBox 的几种显示方式
1.最简单的,只显示提示信息 MessageBox.Show("Hello~~~~"); 2. 可以给消息框加上标题. MessageBox.Show("There ar ...
- Excel技巧--批量生成指定名称的文件夹
当我要按excel表当中的名字来批量生成文件夹时,手动一个个制作很麻烦(特别是成百上千个时).于是我们可以这么做: 1.在名字右侧建立公式:"MD "&A2. 2.将公式拖 ...