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再通过小颖写的方法, ...
随机推荐
- Javascript 中 的 for ... in 和 for ... of 差别
Javascript 中 的 for ... in 和 for ... of 差别 for ... in 是历史问题,在循环数据时会可以出现奇怪的问题,比如把数据的属性循环出来. for ... of ...
- 数据结构（c语言版）代码
第1章 绪论 文档中源码及测试数据存放目录:数据结构\▲课本算法实现\▲01 绪论 概述 第一章作为绪论,主要介绍了数据结构与算法中的一些基本概念和术语.对于这些概念术语 ...
- 创建表时，主键 USING BTREE、USING HASH 的含义（待补充）
PRIMARY KEY (`id`) USING BTREE
- taro refs引用
创建 Refs Taro 支持使用字符串和函数两种方式创建 Ref: 使用字符串创建 ref 通过函数创建 ref(推荐) 你也可以通过传递一个函数创建 ref, 在函数中被引用的组件会作为函数的第一 ...
- gaea-editor 知识点
github 地址:https://github.com/ascoders/gaea-editor
- spring mvc 请求参数日期格式化 代码
package com.sbl.pay.subaccount.converter; import java.text.DateFormat; import java.text.SimpleDateFo ...
- Java变量的初始值
Java中的变量如果没有赋值,成员变量默认被初始化,局部变量则不会. 对于成员变量 int a; // a的初始值为0 如下例中的成员变量a,b,c,d public class Va ...
- vs2015重新安装后，项目属性中的目标框架中没有framework4.6.1
vs2015重新安装后,安装完后 项目属性中的目标框架中没有framework4.6.1, 控制面板的程序和功能中存在该安装包. 原因: NDP461-DevPack-KB3105179-CHS.e ...
- 在Linux下安装JDK图文解析
参考自http://weixiaolu.iteye.com/blog/1401786 JDK官网下载:http://blog.csdn.net/chongxin1/article/details/70 ...
- [转]happybase1.0 报错：ThriftPy does not support generating module with path in protocol 'f'
happybase1.0 报错:ThriftPy does not support generating module with path in protocol 'f' 2016-10-12 14: ...