文章目录
- 1、placeholder - 用作提示信息
- 2、input 的 新type
- 3、contenteditable - 是否可编辑
- 4、draggable - 是否可拖拽
总结： 只有
placeholder\contenteditable没有兼容问题
1、placeholder - 用作提示信息
placeholder：用作提示信息 ，没有兼容性问题
<input type="text" placeholder="请输入用户名">
2、input 的 新type
之前的type:text,radio,checkbox,file,password,submit
<input type="file">
input 的 新type:
<form> <!-- 写在form表单下 -->
<!-- Calendar类：是个大类，不止有一种,时间插件，不常用，兼容性不好，只有chrome支持 -->
日期date： <input type="date">
时间time:<input type="time">
周 week： <input type="week">
年月日+ 时间datetime-local：<input type="datetime-local">
<br>
数字number： <input type="number"><!-- 只有chrome支持 -->
邮件email：<input type="email"> <!-- 只有chrome、火狐支持 -->
颜色选择器color： <input type="color" name='color'> <!-- 只有chrome支持 -->
range : <input type="range" min="1" min="100" name='range1'> <!-- 只有chrome、safari支持 -->
search : <input type="search" name="search"> <!-- 只有chrome支持,safari支持一点功能 -->
url : <input type="url"> <!-- 只有chrome、火狐支持 -->
<input type="submit">
</form>
3、contenteditable - 是否可编辑
- contenteditable 属性，默认值是false,不可编辑； true的话可编辑
- 没有兼容性问题，可以用来修改表格
- 这个属性可以继承，如果继承了想修改当前，也可以覆盖
<div contenteditable="true">
hello 可编辑
<br>
<span>world!可编辑</span>
</div>
<div contenteditable="true">
hello 可编辑
<br>
<span contenteditable="false">world!不可编辑</span>
<!-- 注意这里是：span 内部内容不能编辑和删除，但是span标签可以被删除 ，不建议这样嵌套写-->
</div>
4、draggable - 是否可拖拽
- div标签 默认值是false,不可拖拽；a标签/img 默认是true，可拖拽
- 只有chrome支持,safari支持, （部分）火狐不支持
- 拖拽的组成：被拖拽的物体 和 目标区域
- 被拖拽的物体的声明周期：按下开始移动的瞬间–叫
拖拽开始ondragstart； 移动的时候–拖拽进行中ondrag；拖拽结束ondragend
oDragDiv.ondragstart = function(e){ //开始事件：按下物体的瞬间是不会触发事件的，必须稍微移动一点点，才触发拖拽开始事件
console.log(e);
// e.clientX / e.clientY 代表起始的时候鼠标的点
}
oDragDiv.ondrag = function(e){ //移动事件：也是移动的一瞬间开始触发
console.log(e);
}
oDragDiv.ondragend = function(e){ //结束事件：松开物体的瞬间触发
console.log(e);
}
- 目标区域可以接收过来的元素， 目标区域的声明周期：
进入ondragenter、移动ondragover、离开ondragleave 、放下ondrop
注意：
- 拖拽进入时触发的事件，不是元素进入就触发，而是拖拽的鼠标进入才触发
- 要执行drop 事件，需要先在ondragover里阻止默认事件，
e.preventDefault();
targetDiv.ondragenter = function(e){ //拖拽进入时触发的事件，不是元素进入就触发，而是拖拽的鼠标进入才触发
}
targetDiv.ondragover = function(e){ //在区域上面移动 触发事件：类似被拖拽物体的 ondrag事件,都是不停的触发
e.preventDefault(); //阻止默认事件，
}
targetDiv.ondragleave = function(e){ //在目标区域离开触发：
}
targetDiv.ondrop = function(e){ // html所有元素，拖拽结束的时候（拖拽周期结束时），默认事件都是回到原处
console.log('drop');
}
// 事件是由行为触发的，但是一个行为可以触发不止一个事件， ondragover 执行完，可以执行 回到原处 ；也可以执行drop事件，默认执行回到原处，要阻止默认事件，才能触发drop事件
demo1: 拖拽dragBox然后可以放下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5 新增属性</title>
<style>
.dragBox{
position:absolute; /*拖拽放下的时候要给left / top 赋值，所以要写position */
width:100px;
height:100px;
background:green;
}
.target{
position:absolute;
left:600px;
width:200px;
height:200px;
border:1px solid #666;
}
</style>
</head>
<body>
<div class='dragBox' draggable='true'>被拖拽的物体</div>
<div class="target">目标区域</div>
<script>
// 被拖拽的物体,及其声明周期------------------
var oDragDiv = document.getElementsByClassName('dragBox')[0];
var beginX = 0,
beginY = 0
oDragDiv.ondragstart = function(e){
beginX = e.clientX; //开始事件里，记录开始的坐标
beginY = e.clientY;
}
oDragDiv.ondragend = function(e){
var x = e.clientX - beginX; //结束事件里，根据结束左边计算拖动的距离
var y = e.clientY - beginY;
oDragDiv.style.left = oDragDiv.offsetLeft + x + 'px'; //根据原理的偏移量 计算现在的位置
oDragDiv.style.top = oDragDiv.offsetTop + y + 'px'; //要设置left / top属性，必须有position 属性
}
// 目标区域/目标元素----------------------------------
// 目标区域可以接收过来的元素，
var targetDiv = document.getElementsByClassName('target')[0];
targetDiv.ondragenter = function(e){ //拖拽进入时触发的事件，不是元素进入就触发，而是拖拽的鼠标进入才触发
}
targetDiv.ondragover = function(e){ //在区域上面移动 触发事件：类似被拖拽物体的 ondrag事件,都是不停的触发
e.preventDefault(); //阻止默认事件，
}
targetDiv.ondragleave = function(e){ //在目标区域离开触发：
}
targetDiv.ondrop = function(e){ // html所有元素，拖拽结束的时候（拖拽周期结束时），默认事件都是回到原处
console.log('drop');
}
// 事件是由行为触发的，但是一个行为可以触发不止一个事件， ondragover 执行完，可以执行 回到原处 ；也可以执行drop事件，默认执行回到原处，要阻止默认事件，才能触发drop事件
</script>
</body>
</html>
demo2: box1 和 box2 都是拖拽区域了，可以在两个区域来回拖拽
注意：e.dataTransfer.effectAllowed = 'link';和 e.dataTransfer.dropEffect = 'link';两个属性
<!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>
.box1{
width: 150px;
height:auto;
border: 1px solid #666;
position: absolute;
padding:10px;
}
.box2{
width: 150px;
height:auto;
border: 1px solid #666;
position: absolute;
left:300px;
padding:10px;
}
li{
list-style: none;
width:100px;
height:30px;
background: green;
position: relative;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="box2"></div>
<script>
var dragDom; //用来存拖拽的是哪个元素
var liList = document.getElementsByTagName('li');
for(let i = 0;i < liList.length;i++){
liList[i].setAttribute('draggable',true); //设置属性，让其可拖拽
liList[i].ondragstart = function(e){
dragDom = e.target; //e.target 是事件的触发源，就是谁触发了这个事件，就是拖拽的元素
e.dataTransfer.effectAllowed = 'link'; //这个属性必须在 ondragstart里写，其他里面不好使，link 是链接
}
}
var box2 = document.getElementsByClassName('box2')[0];
box2.ondragover = function(e){
e.preventDefault(); //阻止默认事件
}
box2.ondrop = function(e){ //要放下，就要先阻止默认事件
box2.appendChild(dragDom);
dragDom = null;
}
var box1 = document.getElementsByClassName('box1')[0]; //这样box1 和 box2 都是拖拽区域了，可以在两个区域来回拖拽
box1.ondragover = function(e){
e.preventDefault();
}
box1.ondrop = function(e){
e.dataTransfer.dropEffect = 'link'; // 这个必须放在drop里，要和拖拽原理ondragstart里的allow相对应
box1.appendChild(dragDom);
dragDom = null;
}
</script>
</body>
</html>
