初识篇 — Draggable拖拽

一. Input总结：

提示性属性:

• placeholder = "请输入"

例：

<input type= "text" placeholder = "请输入">

type类型：

1. 时间类型：

• type = 'date' (兼容性不好，只支持chrome， Safari, Ie不支持)
• type = 'time'
• type = 'week'
• type = 'datetime-local'

例：

<input type= "time">

2. 其他类型：

• type = 'radio'
• type = 'checkbox'
• type = 'fale' 选择添加文件
• type = 'number' 只能填写数字。 (兼容性不好，只支持chrome， Safari, Ie不支持)
• type = 'email' (兼容性不好，只支持chrome和火狐; Safari, Ie不支持)
• type = 'color' 颜色选择器 。(兼容性不好，只支持chrome， Safari, Ie不支持)
• type = 'range' 滑动选择器。 (chrome和Safari支持; 火狐和Ie不支持)

3. contenteditable属性

• 兼容性好，可修改里面内容 ，可被子元素继承（这里会有陷阱）

例：

<div contenteditable="true">panda</div>

二. Draggable：

前提摘要：

draggable="true" 开启拖拽属性
<div draggable="true"></div>

1. 拖拽的生命周期：拖拽开始，拖拽进行中，拖拽结束
2. 拖拽的组成：被拖拽的物体，目标区域(目标元素)
3. dom操作 - 被拖拽的物体 (下述的dom指div的dom对象)

• dom.ondragstart 开始拖拽时触发一次
• dom.ondrag 拖拽时触发（多次）
• dom.ondragend （松开鼠标时触发）

例：

dom.ondragstart = function(e){
    console.log(e)
}

4. dom操作 - 目标区域

• dom.ondragenter 鼠标进入目标区域触发一次
• dom.ondragover 鼠标进入目标区域时触发，并且在其内移动时也触发
• dom.dragleave 鼠标离开目标区域触发
• dom.ondrop 松开鼠标时触发 但是要想触发这个事件要在ondragover中阻止默认事件

例：

dom.ondragover = function (e){
    e.preventDefault
}
dom.ondrop = function (e){
    console.log('drop')
}

知识补充：

1. 所有的标签元素，当拖拽周期结束时，默认事件是回到原处
2. img 标签 和 a 标签 默认就带有拖拽功能
3. draggable="true" chrom,safari可以正常使用的，firefox下不好用
4. 事件是由行为触发的，但是一个行为可以不止触发一个事件