placeholder
    输入框提示信息
    contenteditable
    是否可以编辑元素内容
    子元素可以继承
    默认值：false
    draggable
    是否可以拖拽元素，a元素与img元素默认就有
    Chrome与safari可以正常使用
    拖拽的生命周期，拖拽的组成，
    1.拖拽的开始，拖拽进行中，拖拽结束
    事件
    ondragstart 拖拽的开始
    ondrag 拖拽进行中
    ondragend 拖拽结束

    1.         var div = document.getElementsByTagName('div')[0];
    2.         var beginX = 0;
    3.         var beginY = 0;
    4.         div.ondragstart = function(e){
    5.             beginX = e.clientX;
    6.             beginY = e.clientY;
    7.         }
    8.         div.ondragend = function(e){
    9.             var x = e.clientX - beginX;
    10.             var y = e.clientY - beginY;
    11.             div.style.left = div.offsetLeft + x +'px';
    12.             div.style.top = div.offsetTop + y + 'px';

    2.被拖拽物，目标区域
    事件
    ondragenter
    拖拽物体被拖进目标区域，这里的元素图形进去不会触发，需要拖拽的鼠标进入才会触发
    ondragover
    在目标区域移动就会触发
    ondragleave
    离开目标区域触发
    ondrop
    在目标区域放下触发，默认情况下不会触发，因为所有标签元素，当拖拽周期结束时，默认事件是回到原处，需要在ondragover事件下阻止默认事件
    在drop和dragstart 使用e.dataTransfer.effectAllowed/dropEffect 可以修改鼠标样式，兼容性极差
    拖拽实例，将ul1的子元素拖拽进ul2

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         ul {
    10.             padding: 0;
    11.             margin: 0;
    12.             width: 100px;
    13.             height: 100px;
    14.             border: 1px solid #000;
    15.             position: absolute;
    16.         }
    18.         li {
    19.             list-style: none;
    20.             width: 80px;
    21.             height: 25px;
    22.             background: chartreuse;
    23.             margin: 5px auto;
    24.         }
    25.         .warp1 {
    26.             left: 300px;
    27.         }
    28.         .warp2 {
    29.             left: 600px;
    30.         }
    31.     </style>
    32. </head>
    33. <body>
    34.     <ul class="warp1">
    35.         <li class="box" draggable="true"></li>
    36.         <li class="box" draggable="true"></li>
    37.         <li class="box" draggable="true"></li>
    38.     </ul>
    39.     <ul class="warp2"></ul>
    40.     <script>
    41.         var dragDom = null;
    42.         var li = document.getElementsByClassName('box');
    43.         var warp1 = document.getElementsByClassName('warp1')[0];
    44.         var warp2 = document.getElementsByClassName('warp2')[0];
    45.         for (var i = 0; i < li.length; i++) {
    46.             li[i].ondragstart = function (e) {
    47.                 dragDom = e.target;
    48.             }
    49.         }
    50.         warp2.ondragover = function (e) {
    51.             return false;
    52.         }
    53.         warp2.ondrop = function (e) {
    54.             warp2.appendChild(dragDom);
    55.             dragDom = null;
    56.         }
    57.         warp1.ondragover = function (e) {
    58.             return false;
    59.         }
    60.         warp1.ondrop = function (e) {
    61.             warp1.appendChild(dragDom);
    62.             dragDom = null;
    63.         }
    65.     </script>
    66. </body>
    68. </html>