div的缺陷, 语义化不太好.
用input type=color 封装一个小插件
给目标元素选择颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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);
}
dragover事件会阻止 drop 事件.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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");
}
关于这个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 返回被拖动的文件.
