如何通过右键单击html元素来制作自定义菜单？

时间：2019-05-27 15:42:01

标签： javascript jquery html css

我有一个名为doc1的HTML元素，我希望当人们用鼠标右键单击它来显示个性化菜单时，使其成为可能。我不想显示默认的右键菜单。我要做的基本上是右键单击文档图像以显示包含某些图像的菜单。 

/***************************************** DRAGGABLE ITEMS **************************************************/
// Make the DIV element draggable:
dragElement(document.getElementById("BlueWindow"));
dragElement(document.getElementById("janela"));
dragElement(document.getElementById("janelaCalendario"));
dragElement(document.getElementById("doc1"));
dragElement(document.getElementById("DocImgBlue"));
dragElement(document.getElementById("net"));
dragElement(document.getElementById("docwindow"));


function dragElement(elmnt) {
    var pos1 = 0,
        pos2 = 0,
        pos3 = 0,
        pos4 = 0;
    if (document.getElementById(elmnt.id + "header")) {
        // if present, the header is where you move the DIV from:
        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    } else {
        // otherwise, move the DIV from anywhere inside the DIV: 
        elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}
/**************************************** Contactos **********************************************************/
;
(function(global) {
    var AddressBook = function(name, phone, email) {
        return new AddressBook.init(name, phone, email);
    };

    AddressBook.prototype = {
        //default functions
        data: [
            //add data here
        ],
        searchResults: [

        ],
        addNewContact: function(name, phone, email) {
            this.data.push({
                name: name,
                phone: phone,
                email: email
            });
            return this;
        },
        save: function() {
            //save to local storage. This isn't hugely necessary

        },
        returnAll: function() {
            return this.data;
        },
        displayData: function() {
            this.log(this.data);
            return this;
        },
        log: function(data) {
            console.log(data);
            return this;
        },
        search: function(searchTerm) {
            if (this.data.length) {
                for (var i = 0; i < this.data.length; i++) {
                    if (this.data[i].name.toLowerCase() == searchTerm.toLowerCase()) {
                        console.error(this.data[i]);
                        this.searchResults.push(this.data[i]);
                    }
                }

                return this.searchResults;
            } else {
                console.log("There are no results");
            }
            return this;
        },
        lastResults: function() {
            return this.searchResults;
        }
    }

    AddressBook.init = function(name, phone, email) {
        var self = this;
        //set up the address book
        if (name || phone || email) {
            self.addNewContact(name || "", phone || "", email || "");
        }

    }

    AddressBook.init.prototype = AddressBook.prototype;

    global.AddressBook = $ab = AddressBook;
})(window);

if (!window.contactList) { //check if we already have a contact list
    window.contactList = $ab();
}

var form = document.getElementById('contact');
form.addEventListener('submit', function() {
    if (!window.contactList) { //check if we already have a contact list
        window.contactList = $ab(form.person.value, form.phone.value, form.email.value);
    } else {
        //saves new values rather than deleting old ones as well
        contactList.addNewContact(form.person.value, form.phone.value, form.email.value);
    }

    form.person.value = '';
    form.phone.value = '';
    form.email.value = '';

    event.preventDefault();
});

var searchForm = document.getElementById('search');
searchForm.addEventListener('submit', function() {
    var results;
    if (results !== undefined) {
        results = null;
    }
    if (!window.contactList) {
        window.contactList = $ab();
    } else {
        results = contactList.search(searchForm.search.value);
    }
    document.getElementById('results').innerHTML = '';
    if (results.length > 0) {

        for (var i = 0; i < results.length; i++) {
            document.getElementById('results').innerHTML += '<div class="contact-item">Name:' + results[i].name + '<br>Phone:' + results[i].phone + '<br>Email:' + results[i].email + '</div><hr>';
        }
    } else {
        document.getElementById('results').innerHTML += '<div class="contact-item">N&atildeo foram encontrados contactos com este nome</div><hr>';
    }

    //do something with the results
    event.preventDefault();
});

document.getElementById('js-show-all').addEventListener('click', function() {
    if (window.contactList) { //check if we already have a contact list
        document.getElementById('show-panel').innerHTML = '';
        var contacts = contactList.returnAll();
        console.log(contacts);
        if (contacts.length > 0) {
            for (var i = 0; i < contacts.length; i++) {
                document.getElementById('show-panel').innerHTML += '<div class="contact-item">Name:' + contacts[i].name + '<br>Phone:' + contacts[i].phone + '<br>Email:' + contacts[i].email + '</div><hr>';
            }
        } else {
            document.getElementById('show-panel').innerHTML += '<div class="contact-item">N&atildeo existe nenhum contacto. Adicione alguns.</div><hr>';
        }
    }
    document.getElementById('show-panel').style.display = 'block';

    document.getElementById('search-panel').style.display = 'none';
    document.getElementById('contact-panel').style.display = 'none';
});

document.getElementById('js-search').addEventListener('click', function() {
    document.getElementById('show-panel').style.display = 'none';
    document.getElementById('search-panel').style.display = 'block';
    document.getElementById('contact-panel').style.display = 'none';
});

document.getElementById('js-add-new').addEventListener('click', function() {
    document.getElementById('show-panel').style.display = 'none';
    document.getElementById('search-panel').style.display = 'none';
    document.getElementById('contact-panel').style.display = 'block';
});


/***************************************** Calendario *******************************************************/
function abrirCal() {
    document.getElementById("janelaCalendario").style.display = "";
    document.getElementById("janelaCalendario").style.zIndex = "10";
}

function fecharCal() {
    document.getElementById("janelaCalendario").style.display = "none";
    document.getElementById("janelaCalendario").style.zIndex = "1";
}
/***************************************** SS ***************************************************************/



history.pushState(null, null, location.href);
window.onpopstate = function() {
    history.go(1);
};

/*************************************** DRAG DOCS */
$(function() {


    startTime();

    $('#docwindow').droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        cursor: 'move',
        greedy: true,
        drop: function(event, ui) {
            if (ui.draggable.hasClass('out-of-box')) {
                ui.draggable.remove();
                console.log("Removing element");
            }

        }
    });


    $('#BlueWindow').droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        cursor: 'move',
        greedy: true,
        drop: function(event, ui) {
            if (ui.draggable.hasClass('out-of-box')) {
                ui.draggable.remove();
                console.log("Removing element");
            }

        }
    });

    $('body').droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        cursor: 'move',
        drop: function(event, ui) {
            if (ui.draggable.hasClass("in-box")) {
                var clone = ui.draggable.clone();
                clone.removeClass("in-box").addClass("out-of-box");
                clone.detach().appendTo($("body")).draggable({});
                ui.draggable.draggable({
                    revert: true
                });
            }
        }
    });

    $("#docwindow, .draggable").draggable({});
    $("#body").draggable({});
    $("#BlueWindow, .draggable").draggable({});
});
/*******************************BLUE WINDOW*******************************************/

#HelpBlue {
    height: 4.8%;
    position: absolute;
    top: 1%;
    right: 5.4%;
    z-index: 1;
}

#BlueWindow {
    position: absolute;
    width: 50%;
    height: 39%;
    left: 400px;
    top: 200px;
    border-radius: 10px black solid;
    z-index: 5;
}

#BlueWindowheader {
    z-index: 10;
    height: 7%;
    background: rgb(30, 87, 153);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
    /* IE6-9 */
}

#closeBlue {
    height: 4.8%;
    top: 1%;
    right: 1%;
    background-color: none;
    position: absolute;
    border-radius: 100%;
    z-index: 1;
}

#JoanaPTexto {
    color: black;
    text-align: center;
    text-shadow: 3px 2px grey;
    font-size: 100%;
    position: relative;
    margin: 0;
    left: 0%;
}

#DocImgBlue {
    width: 32%;
    background-color: none;
    padding: 2%;
}

#bottomBlue {
    background-color: white;
    height: 91%;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
}

#JoanaDoc {
    position: absolute;
    top: 85%;
    left: 5%;
    font-size: 60%;
}
<div id="BlueWindow">
            <div id="BlueWindowheader">
                <header class="windowTop1">
                    <img id="HelpBlue" onclick="alert('Para transferir o documento tem que o arrastar para a direita da janela. Para apagar o documento abra a janela e arraste o documento de volta.');" src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Help-icon.png"></img>
                    <img id="closeBlue" class="X" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-dialog-close-icon.png" alt="X" onclick="fecharBlue()">
                    <h1 id="JoanaPTexto">Joana's Phone</h1>
                </header>
            </div>
            <div id="bottomBlue">
                <div id="doc1" class="draggable in-box ui-widget-content">
                    <img id="DocImgBlue" src="https://img.icons8.com/pastel-glyph/2x/file.png">
                    <h1 id="JoanaDoc">Example-Joana</h1>
                </div>
            </div>
        </div>

0 个答案:

没有答案
相关问题
最新问题