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再通过小颖写的方法, ...
随机推荐
- Linux常用文本操作命令整理
阅读目录 1.统计命令——wc 2.切分命令——cut 3.排序命令——sort 4.去重命令——uniq 5.查找命令——grep 6.替换/查找/删除命令——sed 7.强大的文本分析命令——aw ...
- tornado输入-get_query_argument()等 笔记
最外面的代码结构 import tornado.web import tornado.ioloop import tornado.options import tornado.httpserver f ...
- EntityFrameworkCore操作记录
Install-Package Microsoft.VisualStudio.Web.CodeGeneration.Design -Version 2.0.3 Add-Migration Init U ...
- 菜鸟如何使用hanlp做分词的过程记录
菜鸟如何使用hanlp做分词的过程记录 最近在学习hanlp的内容,准备在节后看看有没有时间整理一波hanlp分享下,应该还是会像之前分享DKHadoop一样的方式吧.把整个学习的过程中截图在配文字的 ...
- ionic cordova platform --help
ionic platform add android 给我报这个问题,不理解 The platform command has been renamed. To find out more, run: ...
- 根据数据库结构生成TreeView
procedure TUIOperate.FillTree(treeview: TTreeView); var findq: TADOQuery; node: TTreeNode; //这个方法是根据 ...
- python和linux如何学习一门新的编程语言（python）（python基础结构）
1.python 开发 1.1基础 python,java语言优势:可以写网页+后台功能,python开发效率高,执行效率低,java执行效率高,开发效率低 环境变量配置:进入--->控制面板\ ...
- VS2010 如何自动生成UML图
项目名---右键----查看类图
- 黄聪：PHP JSON_ENCODE 不转义中文汉字的方法
ios程序中不识别读取到的JSON数据中 \u开头的数据. PHP 生成JSON的时候,必须将汉字不转义为 \u开头的UNICODE数据. 网上很多,但是其实都是错误的,正确的方法是在json_enc ...
- 【Mysql】mysql使用触发器创建hash索引
概述 若设计的数据表中,包含较长的字段,比如URL(通常都会比较长),查询时需要根据该字段进行过滤: select * from table_xxx where url = 'xxxxxxx'; 为了 ...