input新增特性
type为text 表示文本框
<input type="text" />
type为password 表示密码框
<input type="password" />
type 为checkbox跟redio时表示多选框和单选框
<input type="checkbox" />
<input type="radio" />
以下属性值大部分只有谷歌浏览器支持
当type为data时表示年月日选择器
当type为time为时间选择器
当type为week为周选择器
<input type="date" />
<input type="time" />
<input type="week" />
<!-- 结和上面的data time week -->
<input type="datetime-local" />
当type为color时表示颜色选择器
<input type="color" />
type为email时表示只能输入邮箱文本框
<input type="email" placeholder="请输入邮箱" />
当type为number时表示只能输入数字的文本框
<input type="number" />
当type为range表滑块
<input type="range" id="range" value="0" min="0" max="100" name="range" />
当type为search时表示显示历史数据
<input type="search" name="search" id="" placeholder="请输入搜索内容" />
当type为url表示只能输入网址的文本框
<input type="url" name="url" id="">
当type表示file时表示选择文件
当type表示submit时表示提交from表单的数据
<input type=" file" />
contenteditabel属性
<!-- 1.没有浏览器兼容问题 -->
当contenteditable为true时可以让文本框与文字来回转换
<!-- 2.contenteditable属性是可以继承的 -->
<!-- 1.没有浏览器兼容问题 -->
<!-- contenteditable属性是可以继承的 -->
<div contenteditable="true">
pandelete
<br />
<!-- contenteditable属性是可以覆盖的 -->
<span contenteditable="false">pandelete</span>
</div>
<span contenteditable="true">pandelete</span>
拖拽属性
draggable
只有谷歌chrome浏览器支持draggable属性 跟safari浏览器支持
<!-- draggable可以拖拽的属性 -->
<!-- 只有谷歌chrome浏览器支持draggable属性 跟safari浏览器支持 -->
<div class="a" draggable="true"></div>
<!-- a标签跟img标签默认是可以拖拽的 -->
<a href="https://www.baidu.com">百度</a>
<img src="https://www.baidu.com/img/bd_logo1.png" alt="" />
拖拽的生命周期
1.拖拽开始,
ondragstart:开始事件按下的一瞬间是不会触发事件的,只有当用户开始拖拽时才会触发该事件。
2.拖拽进行中,
ondrag:拖拽过程中事件
3.拖拽结束
ondragend:结束事件 松手时触发事件
目标区域
1.鼠标进入
ondragenter:当鼠标完全进入目标区域时触发事件
2.目标区域内移动
ondragover:当拖拽物体在目标区域时触发
3.鼠标离开目标区域
ondragleave :鼠标离开目标区域时触发
4.释放鼠标时触发
ondrop:当鼠标在目标区域释放鼠标按钮时触发
const a = document.querySelector(".a");
let beginX = 0;
let beginY = 0;
a.ondragstart = function (event) {
console.log(event);
beginX = event.clientX;
beginY = event.clientY;
// console.log(beginX, beginY);
};
a.ondrag = function (event) {
// console.log(event)
};
console.log(a.offsetLeft);
a.ondragend = function (event) {
// console.log(event);
a.style.left = event.clientX - beginX + "px";
a.style.top = a.offsetTop + event.clientY - beginY + "px";
console.log(a.style.left);
};
拖拽练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box1 {
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: absolute;
}
li {
width: 100%;
height: 30px;
background-color: #abcdef;
list-style: none;
margin: 10px auto 0 auto;
position: relative;
}
.box2 {
left: 300px;
position: absolute;
width: 200px;
height: auto;
border: 1px solid skyblue;
position: absolute;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="box2"></div>
<script>
let Dragend;
const liList = document.getElementsByTagName("li");
for (let i = 0; i < liList.length; i++) {
liList[i].setAttribute("draggable", true);
liList[i].ondragstart = (e) => {
// e.dataTransfer.effectAllowed = "link";
// Dragend = e.target.cloneNode(true);
Dragend = e.target;
console.log(e.target);
};
}
const box2 = document.querySelector(".box2");
box2.addEventListener("dragover", function (e) {
e.preventDefault();
});
box2.ondrop = function (e) {
console.log(Dragend);
box2.appendChild(Dragend);
// Dragend = null;
};
const box1 = document.querySelector(".box1");
box1.addEventListener("dragover", function (e) {
e.preventDefault();
});
box1.ondrop = function (e) {
e.dataTransfer.dropEffect = "link";
console.log(Dragend);
box1.appendChild(Dragend);
// Dragend = null;
};
</script>
</body>
</html>
拖拽案例