版权声明：进击的葱 https://blog.csdn.net/qlwangcong518/article/details/85253366
描述：
单击右键出现菜单，菜单中有新建，复制，剪切，粘贴，删除
选择新建时，创建第一个div，宽高50，颜色随机，并且放在鼠标点击的位置
点击div，div被选中，加边线，如果被选中，div可以被拖动，当选择别的div时
原div取消被选中状态，不可以拖动。
复制可以复制被选中的div
剪切可以剪切被选中的div
粘贴可以将复制或者剪切的div粘贴在点击的位置
删除可以删除div
效果：
实现：
js：
var Method=(function () {
return {
EVENT_ID:"event_id",
loadImage:function (arr) {
var img=new Image();
img.arr=arr;
img.list=[];
img.num=0;
// 如果DOM对象下的事件侦听没有被删除掉，将会常驻堆中
// 一旦触发了这个事件需要的条件，就会继续执行事件函数
img.addEventListener("load",this.loadHandler);
img.self=this;
img.src=arr[img.num];
},
loadHandler:function (e) {
this.list.push(this.cloneNode(false));
this.num++;
if(this.num>this.arr.length-1){
this.removeEventListener("load",this.self.loadHandler);
var evt=new Event(Method.EVENT_ID);
evt.list=this.list;
document.dispatchEvent(evt);
return;
}
this.src=this.arr[this.num];
},
$c:function (type,parent,style) {
var elem=document.createElement(type);
if(parent) parent.appendChild(elem);
for(var key in style){
elem.style[key]=style[key];
}
return elem;
},
mixColor:function (red,green,blue,alpha) {
var obj={};
var reds=Method.getColor(red);
var greens=Method.getColor(green);
var blues=Method.getColor(blue);
var alphas=Method.getColor(alpha);
obj.color="#"+reds[1]+greens[1]+blues[1];
obj.colorAlpha="#"+reds[1]+greens[1]+blues[1]+(!alpha ? "FF" : alphas[1]);
obj.rgba="rgba("+reds[0]+","+greens[0]+","+blues[0]+","+(!alpha ? 1 : alphas[0]/256)+")";
obj.rgb="rgba("+reds[0]+","+greens[0]+","+blues[0]+")";
return obj;
},
getColor:function (col) {
if(typeof col!=="number" && !Array.isArray(col)){
col=256;
}
if(col>256) col=256;
var color;
if(Array.isArray(col)){
color =Math.floor(Method.random(col[0],col[1]));
col=color.toString(16);
}else{
color=Math.floor(Math.random()*col);
col=color.toString(16);
}
if(col.length===1){
col="0"+col;
}
return [color,col];
},
random:function (min,max) {
max=Math.max(min,max);
min=Math.min(min,max);
return Math.floor(Math.random()*(max-min)+min);
},
dragElem:function (elem) {
elem.addEventListener("mousedown",this.mouseDragHandler);
elem.self=this;
},
removeDrag:function (elem) {
elem.removeEventListener("mousedown",this.mouseDragHandler);
},
mouseDragHandler:function (e) {
if(e.type==="mousedown"){
e.stopPropagation();
e.preventDefault();
document.point={x:e.offsetX,y:e.offsetY};
document.elem=this;
this.addEventListener("mouseup",this.self.mouseDragHandler);
document.addEventListener("mousemove",this.self.mouseDragHandler);
}else if(e.type==="mousemove"){
this.elem.style.left=e.x-this.point.x+"px";
this.elem.style.top=e.y-this.point.y+"px";
}else if(e.type==="mouseup"){
this.removeEventListener("mouseup",this.self.mouseDragHandler);
document.removeEventListener("mousemove",this.self.mouseDragHandler);
}
}
}
})();html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/Method.js"></script>
<style>
div
{
background-color: deepskyblue;
;
}
</style>
</head>
<body>
<script>
var ul,selectedElem,copyElem;
var list=["新建","复制","剪切","粘贴","删除"];
const RECT_W=50;
const RECT_H=50;
init();
function init() {
ul=Method.$c("ul",document.body,{
listStyle:"none",
padding:0,
margin:0,
display:"none",
position:"absolute",
zIndex:1
});
for(var i=0;i<list.length;i++){
var li=Method.$c("li",ul,{
padding:"7px 30px",
color:"#FFFFFF",
backgroundColor:"dodgerblue",
cursor: "default"
});
li.textContent=list[i];
}
ul.addEventListener("mouseover",mouseHandler);
ul.addEventListener("mouseout",mouseHandler);
ul.addEventListener("mouseleave",mouseHandler);
ul.addEventListener("click",clickHandler);
document.addEventListener("contextmenu",showMenuHandler)
}
function showMenuHandler(e) {
e.preventDefault();
ul.style.display="block";
ul.style.left=e.clientX-20+"px";
ul.style.top=e.clientY-10+"px";
}
function mouseHandler(e) {
if(e.type==="mouseover" && e.target instanceof HTMLLIElement){
e.target.style.backgroundColor="deepskyblue";
}else if(e.type==="mouseout" && e.target instanceof HTMLLIElement){
e.target.style.backgroundColor="dodgerblue";
}else if(e.type==="mouseleave"){
this.style.display="none";
}
}
function clickHandler(e) {
var index=list.indexOf(e.target.textContent);
switch (index)
{
case 0:
createElem(e.x,e.y);
break;
case 1:
if(!selectedElem) break;
copyElem=selectedElem.cloneNode(false);
break;
case 3:
if(!copyElem) break;
var pasteElem=copyElem.cloneNode(false);
document.body.appendChild(pasteElem);
pasteElem.addEventListener("click",selectedElemHandler);
pasteElem.style.left=e.x-RECT_W/2+"px";
pasteElem.style.top=e.y-RECT_H/2+"px";
pasteElem.style.border="none";
break;
case 2:
if(!selectedElem) break;
copyElem=selectedElem.cloneNode(false);
case 4:
if(!selectedElem) break;
selectedElem.removeEventListener("click",selectedElemHandler);
selectedElem.remove();
selectedElem=null;
break;
}
ul.style.display="none";
}
function createElem(x,y) {
var elem=Method.$c("div",document.body,{
width:RECT_W+"px",
height:RECT_H+"px",
backgroundColor:Method.mixColor().rgba,
position:"absolute",
left:x-RECT_W/2+"px",
top:y-RECT_H/2+"px"
});
elem.addEventListener("click",selectedElemHandler);
}
function selectedElemHandler(e) {
if(selectedElem){
selectedElem.style.border="none";
Method.removeDrag(selectedElem);
}
selectedElem=this;
selectedElem.style.border="1px solid #000000";
Method.dragElem(selectedElem);
}
</script>
</body>
</html>