H5 - ContentEditable - Draggable
ContentEditable
当鼠标点击div，它就变成了一个input框, 可以进行输入。没有兼容性问题。一般用来做可以修改的表格。
这个属性是可以继承的， 在这个div里面的所有子标签里面的文本都可以编辑。除非给子标签设置此属性为false。但是可以将整个标签的内容，连带标签看作一个整体删除.
dragable
旁边的比左边的颜色要淡，就是拖拽出来的一个虚影。chrome, safari支持，firefox只有少数几个版本支持
a, img标签的默认 dragable是打开的 拖拽的生命周期：开始拖拽，拖拽进行中， 拖拽结束
被拖拽物体， 目标区域
var demo = document.getElementById('demo')
demo.ondragstart = function(e){
console.log(e)
}
demo.ondragend = function(e){
console.log(e)
}
两次e中的clientX，clientY分别代表的起始位置和最终位置
将一个方块拖到指定位置
var demo = document.getElementById('demo')
var beginX = 0
var beginY = 0
demo.ondragstart = function(e){
beginX = e.clientX
beginY = e.clientY
}
demo.ondragend = function(e){
var x = e.clientX - beginX
var y = e.clientY - beginY
demo.style.left = demo.offsetLeft + x + 'px'
demo.style.top = demo.offsetTop + y + 'px'
}
针对被拖拽元素
ondragstart： 鼠标按下开始移动后触发
ondrag： 拖动过程中触发
ondragend： 拖动之后鼠标松开触发
针对目标元素
ondragenter: 当鼠标进入指定区域的时候才会触发
ondragover：被拖拽元素在指定区域晃动拖动的元素时触发
ondragleave： 当被拖拽元素离开的时候触发
ondrop: 当拖拽放下时...也不会触发。事件是由行为触发的，一个行为可能会触发多个事件。
A => B => C， A触发之后触发B，B触发之后触发C，要想阻止C事件，必须在B后边。
要触发此事件， 需要在over事件里面阻止默认事件，因为拖拽周期结束的默认事件是回到原处。over的时候，基本上被拖拽元素已经到位了，即将松开鼠标， 这时候阻止默认事件(e.preventDefault())是有效的。阻止了默认事件之后， 先触发此事件， 然后触发被拖拽元素的end事件。
拖拽小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: auto;
margin: 100px 0 0 100px;
border: 1px solid #ccc;
min-height: 30px;
}
li {
width: 150px;
height: 30px;
margin: 10px auto;
background: #abcdef;
list-style: none;
}
.box2{
position: absolute;
top: 100px;
left: 500px;
width: 200px;
min-height: 30px;
height: auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="box2">
</div>
<script>
var liList = document.getElementsByTagName('li')
var dragDom = null
for(var i = 0; i < liList.length; i ++){
liList[i].setAttribute('draggable', true)
liList[i].ondragstart = function(e){
dragDom = e.target
}
}
var target = document.getElementsByClassName('box2')[0]
target.ondragover = function(e){
e.preventDefault()
}
target.ondrop = function(e){
console.log(e)
target.appendChild(dragDom)
dragDom = null;
}
</script>
</body>
</html>
dataTransfer
兼容性很不好的一个属性
ele.ondragstart = function(e){
e.dataTransfer.effectAllowed = "link"
}
ele.ondrop = function(e){
e.dataTransfer.dropEffect = "link"
}
一个只能在ondragstart中设置， 另一个只能在ondrop中设置。改变对应时候鼠标的指针样式。还分操作系统， 因为鼠标的样式是操作系统决定的。link, copy, move, copymove, linkmove, all可以选择。但是一般不会用。