`

html5学习笔记

阅读更多

一. 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学习笔记.pdf

    从给定文件的内容来看,这份HTML5学习笔记重点介绍了HTML5表格、列表和表单元素的使用方法。 知识点一:HTML5表格元素 表格是HTML页面中用于展示数据的常用方式,包括三大基本元素:表格(table)、行(tr)和...

    HTML5学习笔记(总结提炼版)——001

    本学习笔记将聚焦于HTML5的基础知识,包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签:HTML5引入了新的语义化标签,如、、、和等,这些标签有助于更好地组织内容,提高可读性和可访问性。 2. ...

    HTML 5 学习笔记

    个人通过学习HTML 5 总结下来的笔记,只适合入入门。深入某一下技术,比如canvas、websocket等,建议查看协议,并多练习。

    HTML5学习笔记.pdf

    HTML5 学习笔记 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。 HTML5 中的新特性包括: * ...

    HTML5学习笔记前台页面.pdf

    这份"HTML5学习笔记前台页面.pdf"涵盖了网站开发的基础知识,包括HTML5的结构、标签使用、CSS、JavaScript以及与服务器相关的技术。 首先,网站开发的基础涉及理解URL网址的构成,它由协议(如HTTP或HTTPS)、域名...

    HTML5学习笔记(总结提炼版)——002 CSS

    【CSS简介】 CSS,全称为层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的Web标准。...持续学习和实践CSS,将使你能够创建出更具吸引力和功能性的网站。

    web前端HTML5学习笔记

    前端笔记HTML5部分

    HTML5学习笔记.docx

    本笔记主要聚焦于HTML5的一些基本元素和特性,以及CSS中的常见样式规则和技巧,旨在帮助中低级开发者提升技能。 首先,HTML5是超文本标记语言的最新版本,它引入了许多新的语义化标签,如、、等,这些标签使得网页...

    HTML5学习笔记,初学者可以借鉴快速学习html5

    这是我重新温故时候做的html学习笔记,参考于尚学堂 百战程序员文档里有关键的源码和简要的说明,初学者可以作为参考如果有什么问题可以和我一起交流,大家共同进步还望大佬光顾的时候可以给我提提意见

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...

    HTML的学习笔记.zip

    HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记HTML的学习笔记HTML的学习笔记 HTML的学习笔记HTML的学习笔记...

    《HTML5学习笔记简明版》.pdf

    Web前端学习资料,Javascript学习

    html 5 学习教程笔记.zip

    html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 学习教程笔记html 5 学习教程笔记 html 5 学习教程笔记html 5 ...

    h5前端学习笔记

    【标题】"h5前端学习笔记"所涵盖的知识点主要集中在HTML5技术及其在前端开发中的应用。HTML5是超文本标记语言的最新版本,它引入了许多新的元素、API和特性,极大地增强了网页的交互性、可访问性和可用性。 【描述...

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar

    前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar前端学习笔记网站(HTML5+CSS3+JavaScript前端网页web课程设计).rar ...

    HTML+CSS学习笔记.zip

    HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...

Global site tag (gtag.js) - Google Analytics