image.png

image.png

image.png

div的缺陷, 语义化不太好.
用input type=color 封装一个小插件
给目标元素选择颜色

function showColor (div) {
    var oInput1 = document.createElement('input');
    var oInput2 = document.createElement('input');
    var oDiv = document.createElement('div');
    oInput1.type = "color";
    oInput2.type = "color";
    oDiv.appendChild(oInput1);
    oDiv.appendChild(oInput2);
    oInput1.oninput = function () {
        div.style.backgroundColor = this.value;
    }
    oInput2.oninput = function () {
        div.style.color = this.value;
    }
    oDiv.style.position = "fixed";
    oDiv.style.left = div.offsetLeft + 'px';
    oDiv.style.top = div.offsetTop + div.offsetHeight + 'px';
    document.body.appendChild(oDiv);
    
}

image.png

image.png

image.png

dragover事件会阻止 drop 事件.

      item.ondragstart = function (e) {
        console.log("dragstart");
      }
      item.ondrag = function (e) {
        console.log("drag");
      }
      item.ondragend = function (e) {
        console.log("dragend");
      }
      // 被重合的区域
      wrapper.ondragenter = function (e) {
        console.log("ondragenter");
      }
      wrapper.ondragover = function (e) {
        e.preventDefault();// 
      默认 over事件会阻止 drop事件!
        console.log("ondragover");
      }
      wrapper.ondragleave = function (e) {
        console.log("ondragleave");
      }
      wrapper.ondrop = function (e) {
        console.log("ondrop");
      }

image.png

关于这个e.dataTransfer

1. 只能是由 dragstart event 设置值, 由 drop event 获取值.
   跟其他事件的 event 不共享.
2. 只能传字符串,如果想传引用值,就必须用JSON.stringfiy()
   获取时,再JSON.parse();
   但不能传一个DOM元素.
3. 能传多个值, 互相之间不会进行覆盖.

api
e.dataTransfer.setData(key,value); 设置
e.dataTransfer.getData(key); 获取
e.dataTransfer.clearData(key); 清楚数据
e.dataTransfer.types 返回 key数组
e.dataTransfer.files 返回被拖动的文件.