一. HTML5拖放
实现图片在两个div中来回拖放
代码:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1,#div2 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
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" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="images/logo1.png" draggable="true" ondragstart="drag(event)" />
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</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")
- 把被拖元素追加到放置元素(目标元素)中
二.SVG
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
</body>
</html>
相关推荐
HTML5学习的详细教程,能快速帮助你掌握这门技术。
从给定文件的内容来看,这份HTML5学习笔记重点介绍了HTML5表格、列表和表单元素的使用方法。 知识点一:HTML5表格元素 表格是HTML页面中用于展示数据的常用方式,包括三大基本元素:表格(table)、行(tr)和...
本学习笔记将聚焦于HTML5的基础知识,包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签:HTML5引入了新的语义化标签,如、、、和等,这些标签有助于更好地组织内容,提高可读性和可访问性。 2. ...
个人通过学习HTML 5 总结下来的笔记,只适合入入门。深入某一下技术,比如canvas、websocket等,建议查看协议,并多练习。
HTML5 学习笔记 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。 HTML5 中的新特性包括: * ...
这份"HTML5学习笔记前台页面.pdf"涵盖了网站开发的基础知识,包括HTML5的结构、标签使用、CSS、JavaScript以及与服务器相关的技术。 首先,网站开发的基础涉及理解URL网址的构成,它由协议(如HTTP或HTTPS)、域名...
【CSS简介】 CSS,全称为层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的Web标准。...持续学习和实践CSS,将使你能够创建出更具吸引力和功能性的网站。
前端笔记HTML5部分
本笔记主要聚焦于HTML5的一些基本元素和特性,以及CSS中的常见样式规则和技巧,旨在帮助中低级开发者提升技能。 首先,HTML5是超文本标记语言的最新版本,它引入了许多新的语义化标签,如、、等,这些标签使得网页...
这是我重新温故时候做的html学习笔记,参考于尚学堂 百战程序员文档里有关键的源码和简要的说明,初学者可以作为参考如果有什么问题可以和我一起交流,大家共同进步还望大佬光顾的时候可以给我提提意见
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...
Web前端学习资料,Javascript学习
html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...
【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本,它引入了许多新的元素、API和特性,极大地增强了网页的交互性、可访问性和可用性。 【描述...
前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...