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
- 只能是由 dragstart event 设置值, 由 drop event 获取值.
跟其他事件的 event 不共享. - 只能传字符串,如果想传引用值,就必须用JSON.stringfiy()
获取时,再JSON.parse();
但不能传一个DOM元素. - 能传多个值, 互相之间不会进行覆盖.
api
e.dataTransfer.setData(key,value); 设置
e.dataTransfer.getData(key); 获取
e.dataTransfer.clearData(key); 清楚数据
e.dataTransfer.types 返回 key数组
e.dataTransfer.files 返回被拖动的文件.
