HTML5基础2

drag

可以把拖放事件拆分成4个步骤

设置元素为可拖放。为了使元素可拖动，把 draggable 属性设置为 true 。
```
 <img draggable="true">复制
```

拖动什么。ondragstart 和 setData()

 const dragestart = (ev)=>{
        ev.dataTransfer.setData('play',ev.target.id)
    }复制

放到何处 - ondragover

  const dragover = (ev)=>{
        ev.preventDefault();
    }复制

进行放置 - ondrop

 const drop = (ev)=>{
        ev.preventDefault();
        let data = ev.dataTransfer.getData('play')
        ev.target.appendChild(document.getElementById(data))
    }复制

完整示例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1" style="width: 400px;height: 500px;border:1px solid black;" ondragover="dragover(event)"
    ondrop="drop(event)"></div>
    <img src="../images/lightoff.png" id="img1" style="width: 200px;height: 300px;" alt="" draggable="true"
    ondragstart="dragestart(event)"
    >
</body>
<script>
    const dragestart = (ev)=>{
        ev.dataTransfer.setData('play',ev.target.id)
        console.log()
    }
    const dragover = (ev)=>{
        ev.preventDefault();
    }
    const drop = (ev)=>{
        ev.preventDefault();
        let data = ev.dataTransfer.getData('play')
        ev.target.appendChild(document.getElementById(data))
    }
</script>
</html>复制

地图

引入百度api
获取地图对象
调用方法
返回信息

示例

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
    <input type="button" onclick="getLocation()" value="确认" />
    <div id="position"></div>
   
</body>
<script type="text/javascript">
    var x = document.getElementById('position');
    function getLocation() {
        // 创建百度地理位置实例，代替 navigator.geolocation
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(e) {
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
            } else {
                x.innerHTML = 'failed' + this.getStatus();
            }
        });
    }
    </script>
</html>复制

datalist

HTML5新增标签用于input/form

示例

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</body>
</html>复制

localStorage和sessionStorage
1. localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
2. sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
3. 图解

标签

HTML5基础2

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	const dragestart = (ev)=>{
	ev.dataTransfer.setData('play',ev.target.id)
	}

	const drop = (ev)=>{
	ev.preventDefault();
	let data = ev.dataTransfer.getData('play')
	ev.target.appendChild(document.getElementById(data))
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div id="div1" style="width: 400px;height: 500px;border:1px solid black;" ondragover="dragover(event)"
	ondrop="drop(event)"></div>
	<img src="../images/lightoff.png" id="img1" style="width: 200px;height: 300px;" alt="" draggable="true"
	ondragstart="dragestart(event)"
	>
	</body>
	<script>
	const dragestart = (ev)=>{
	ev.dataTransfer.setData('play',ev.target.id)
	console.log()
	}
	const dragover = (ev)=>{
	ev.preventDefault();
	}
	const drop = (ev)=>{
	ev.preventDefault();
	let data = ev.dataTransfer.getData('play')
	ev.target.appendChild(document.getElementById(data))
	}
	</script>
	</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请-->
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
	</head>
	<body>
	<input type="button" onclick="getLocation()" value="确认" />
	<div id="position"></div>

	</body>
	<script type="text/javascript">
	var x = document.getElementById('position');
	function getLocation() {
	// 创建百度地理位置实例，代替 navigator.geolocation
	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(e) {
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
	// 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
	x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
	} else {
	x.innerHTML = 'failed' + this.getStatus();
	}
	});
	}
	</script>
	</html>

HTML5基础2

微信扫一扫：分享