鼠标右键菜单实例

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");
            })
        })
    })
}