JSFiddle - React, Tailwind, and code Playground

by adouga

HTML

<script src="http://www.steamdev.com/zclip/js/jquery.zclip.js"></script>
<body>
    <div id="rightMenuItem" class="rightMenu">
           <div class="firstMenuItem" id="copyChildDivId">Copy ID</div>
        </div>
    
    <div schemavalue="content_text1313129658662" schemaname="text1313129658662" style="overflow: hidden; word-wrap: break-word; height: 20px; width: 533.333px; top: 0px; left: 0px;" id="text1313129658662" class="item ui-draggable" aria-disabled="false"><div id="txt1313129658662">text</div></div>
</body>

CSS

.rightMenu {
    position: absolute;
    width: 100px;
    z-index: 75;
    border: solid 2px #CCC;
    background: #6990CB;
    padding: 0px;
    margin: 0px;
    /* display: none; */
}

.rightMenu:hover {
    cursor: default;
}

.firstMenuItem {
    font-family: Arial;
    font-size: 13px;
    color: black;
    height: 18px;
    padding: 0px;
    margin: 0px;
}

.firstMenuItem:hover {
    color: #FFF;
    background-color: #14199C;
    cursor: default;
}

JavaScript

$(document).ready(function() {
        var selectedElement = null;
        
        $("#copyChildDivId").zclip({
            path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
            copy: function() {
                return (selectedElement !== null ? $(selectedElement).attr("id") : "");
            },
            afterCopy: function() {
                $('#rightMenuItem').hide();
            }
        });
        $('.rightMenu').hide();
        
        $(".item").bind("contextmenu", function(e) {
            $('#rightMenuItem').css({
                top: e.pageY+'px',
                left: e.pageX+'px'
            }).show();
            selectedElement = this;
            return false;
        });
        
    });