<html>
<head>
<title></title>
<meta charset=utf-8>
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<style>
#canvas{
width:300px;
height:300px;
background:orange;
font:italic 13px century gothic;
color:darkseagreen ;
padding: 5px;
}
#selector{
width:500px;
height:50px;
border:solid 1px grey;
}
#selector li{
width:100px;
height:50px;
line-height: 50px;
list-style: none;
display: inline-block;
}
.darkmagenta {
background: darkmagenta ;
}
.green{
background: green;
}
.brown{
background: brown;
}
.darkslateblue{
background: darkslateblue;
}
</style>
<script>
function init(){
var lists = document.getElementsByTagName("li");
/*set drag icon*/
var dragicon = document.createElement("img");
dragicon.src = 'mini-vector-icons.png';
/*effectAllowed 一般在dragstart中设置*/
for (var i = 0; i < lists.length; i++) {
lists[i].setAttribute("draggable",true);
lists[i].addEventListener("dragstart",function(e){
var dataTransfer = e.dataTransfer;
dataTransfer.setDragImage(dragicon,-5,-15);
dataTransfer.effectAllowed = 'copy';
dataTransfer.setData("text/plain",this.getAttribute("class"));
},false)
}
var canvas = document.getElementById("canvas");
/*dropEffect 一般在dragover中设置*/
canvas.addEventListener("dragover",function(e){
var dataTransfer = e.dataTransfer;
dataTransfer.dropEffect = 'copy';
e.preventDefault();
},false)
canvas.addEventListener("dragend",function(e){
e.preventDefault();
},false)
canvas.addEventListener("drop",function(e){
var dataTransfer = e.dataTransfer;
var className = dataTransfer.getData("text/plain");
this.style.backgroundColor = className;
e.preventDefault();
e.stopPropagation();
},false)
}
document.ondragover = function(e){e.preventDefault();};
document.ondrop = function(e){e.preventDefault();};
</script>
<body onload="init()">
<ul ></html>
相关文章：