Js實現——右鍵出現選單，選單中有新建，複製，剪下，貼上，刪除
阿新 • • 發佈：2019-01-08
描述：
單擊右鍵出現選單，選單中有新建，複製，剪下，貼上，刪除
選擇新建時，建立第一個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>