JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<div id="contextMenuContainer">
  <ul id="contextMenu">
    <li></li>
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</div>


<div class="filelistarea">
  <div class="icon">

  </div>
  <div class="icon">

  </div>
  <div class="icon">

  </div>
  <div class="icon">

  </div>
  <div class="icon">

  </div>

</div>

CSS

#contextMenuContainer {
  display: none;
  position: absolute;
  border: 1px solid gray;
  background: red;
  z-index: 100;
}

#contextMenuContainer #contextMenu {
  list-style: none;
  padding: 0px;
  font-size: 20px;
}

#contextMenuContainer #contextMenu li {
  font-size: 20px;
  cursor: pointer;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  text-align: center;
}

.filelistarea {
  position:fixed;
  left:50px;
  right:50px;
  top:150px;
  bottom:50px;
  border:1px solid red;
}
.icon {
  width: 30px;
  height: 40px;
  border:1px solid red;
  margin:5px;
}

JavaScript

$(function() {
  var doubleClicked = false;
  $(".icon").on("contextmenu", function(e) {
    e.preventDefault(); // To prevent the default context menu.
    console.log("x,y", e.clientX, e.clientY);
    var win = $(".filelistarea")[0].getBoundingClientRect();
    var menu = $("#contextMenuContainer")[0].getBoundingClientRect();
    var icon = {
      top: e.target.top - win.y,
      left: e.target.left - win.x
    };
    console.log("win", win);
    console.log("icon", icon);
    var offsetleft = 50;
    var offsettop = 10;

    $("#contextMenuContainer").css("top", icon.top + offsettop+win.y);
    $("#contextMenuContainer").css("left", icon.left + offsetleft+win.x);
    //When user click on bottom-left part of window
    if (icon.top > win.height - menu.height && icon.left <= menu.width) {
      $("#contextMenuContainer").css("top", win.height - menu.height+win.y);
    }
    $("#contextMenuContainer").fadeIn(500);

  });

  function FocusContextOut() {
    $(document).on("click", function() {
      doubleClicked = false;
      $("#contextMenuContainer").fadeOut(500);
      $(document).off("click");
    });
  }
});