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

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可以选择。但是一般不会用。