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再通过小颖写的方法, ...
随机推荐
- [转]总结@Autowired 和@Resource
@Resource的作用相当于@Autowired,只不过@Autowired按byType自动注入,而@Resource默认按byName自动注入罢了. @Resource有两个属性是比较重要的,分 ...
- Java的date和string互转
https://blog.csdn.net/angus_17/article/details/7656631
- php格式化数字：位数不足前面加0补足
<?php $var=sprintf("%02d", 2);//生成2位数,不足前面补0 echo $var;//结果为02 ?> 參考:https://blog.cs ...
- Scala实战
1. Eclipse中设置scala调试器 scala的调试器要选择Scala Application(new debuger)Launcher:开始选择图省事,选择了一个字母少的,亲切的Launch ...
- 串口转以太客户端（增加uci、可连接多个服务器）
1. 进入barrier_breaker/package/utils文件夹,新建ttl_client 2. 该目录下的Makefile # # Copyright (C) OpenWrt.org # ...
- jQuery位置操作
position();获取当前标签相对于最近一个父标签中有positon:relative属性的位置. height();标签纯高度 innerHeight();标签内边距padding加上纯高度 o ...
- PPT资源
PPT模板下载:www.1ppt.com/moban/ 行业PPT模板:www.1ppt.com/hangye/ 节日PPT模板:www.1ppt.com/jieri/ PPT素材下载:www.1pp ...
- Centos7 安装sz,rz命令
yum install lrzsz 我记得以前某个我敬佩的人说过压缩分很多种,有空,补充这篇笔记.加油~
- 【springboot】之整合ActiveMQ
1.引入依赖的jar <parent> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 【并发】基于 @Async和 CompletableFuture 实现并发异步操作
参考链接:Spring官方示例 User.java package hello; import com.fasterxml.jackson.annotation.JsonIgnorePropertie ...