jQuery实现鼠标右键菜单
功能:新建、复制、剪切、粘贴、删除
css
.div1{
background-color: skyblue;
}
.div2{
border: 1px solid #000000;
}
// 菜单选项
var arr=["新建","复制","剪切","粘贴","删除"];
var prev, clones;
// 创建ul标签元素放在body中
// 设置css样式
var ul=$("<ul></ul>").appendTo("body").css({
listStyle:"none",
margin:0,
padding:0,
display:"none",
zIndex:1,
position:"absolute",
backgroundColor:"white"
// 添加鼠标离开事件
}).on("mouseleave",function(){
// 当鼠标离开列表元素时,设置隐藏
$(this).css("display","none");
});
// 遍历数组创建li标签元素,设置样式
$.each(arr,function(index,item){
// 创建li标签元素,并将数组里面的每一项内容添加进行
// 添加ul元素中,设置css样式
$("<li>"+item+"</li>").appendTo(ul).css({
border:"1px solid #000000",
padding:"10px 20px",
borderTop: index === 0 ? "1px solid #000000" : "none",
// 鼠标滑过,添加类名,设置样式
}).hover(function(){
$(this).addClass("div1");
},function(){
$(this).removeClass("div1");
// 添加点击事件
}).on("click",function(e){
ul.css("display","none");
// 点击菜单功能
// 根据数组中的文本内容是第几个去设置不同的功能
switch(arr.indexOf($(this).text())){
// 新建
case 0:
// 新建元素执行函数
createDiv(e);
ul.css("display","none");
break;
// 复制
case 1:
if(prev){
// 复制元素
clones=prev.clone(true);
}
break;
// 剪切
case 2:
if(prev){
// 复制元素后,在删除
clones = prev.clone(true);
prev.remove();
prev.removeClass("div2");
prev = null;
}
break;
// 粘贴
case 3:
// 当复制的元素存在时
if(!clones) return;
// 将元素添加到body中,设置位置
clones.prependTo("body").css({
left: e.clientX - 25,
top: e.clientY - 25,
})
// 当点击元素时,添加边线,如果prev存在为真,将上一个进行删除清空
if(prev){
prev.removeClass("div2");
// 删除鼠标按下事件,只能选中一个进行移动
prev.off("mousedown");
prev=null;
}
prev=clones;
prev.addClass("div2");
clones=null;
break;
// 删除
case 4:
// 点击选中的元素进行删除,清空
if(prev){
prev.remove();
prev.removeClass("div2");
prev = null;
ul.css("display","none");
}
break;
}
})
})
// 鼠标右键菜单事件
$(document).on("contextmenu",function(e){
// 取消默认事件
e.preventDefault();
// 设置右键点击ul列表显示的位置,初始隐藏,鼠标右键摁下显示
ul.css({
left:e.clientX-10,
top:e.clientY-10,
display:"block",
});
});
// 创建元素
function createDiv(e){
// 每次点击菜单中新建,就创建div放入body中
$("<div></div>").css({
width:50,
height:50,
backgroundColor:function(){
// 元素背景色随机
return("#"+Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, "0"));
},
position:"absolute",
left: e.clientX-25,
top: e.clientY-25,
}).prependTo("body").on("click",function(){
// 当点击元素时,添加边线,如果prev存在为真,将上一个进行删除清空
if(prev){
prev.removeClass("div2");
// 删除鼠标按下事件,只能选中一个进行移动
prev.off("mousedown");
prev=null;
}
// 添加div2类名,设置边框
prev=$(this);
prev.addClass("div2");
// 鼠标按下事件
prev.on("mousedown",function(e){
e.preventDefault();
// 鼠标移动事件
$(document).on("mousemove",function(e1){
prev.css({
// 设置元素移动的位置
// 点击位置距离当前body可视区域的x,y坐标减去当前目标对象的左上角位置
left:e1.clientX-e.offsetX,
top:e1.clientY-e.offsetY,
});
});
// 鼠标松开时,删除鼠标按下事件和松开事件
$(document).on("mouseup",function(e2){
$(document).off("mousemove mouseup");
})
})
})
}