JSFiddle - React, Tailwind, and code Playground

by FYPs89

HTML

<div id="container">
    
    <div id="ctxtmen" class="invisible">
        <ul>
            <li>Edit</li>        
        </ul>
    </div>

    <div class="a">
        <div class="name">Column 1</div>
        <div class="one">
            <div class="lion">
                <div class="cont">One</div>
            </div>
        </div>
    </div>
    <div class="b">
        <div class="name">Column 2</div>
        <div class="two">
            <div class="eagle">
                <div class="cont">One</div>
            </div>
        </div>
    </div>
</div>
<form id="createitems">
    <input id="content" name="content" type="text" placeholder="Content text here">
    <input id="content2" name="content2" type="text" placeholder="Animal class here">
    <input id="colchoice" name="column" type="checkbox" value="one">
    <label for="colchoice">One</label>
    <input id="colchoice2" name="column" type="checkbox" value="two">
    <label for="colchoice2">Two</label>
    <button id="create" form="createitems" type="button" ">Create</button>
</form>

CSS

#container {
    position: relative;
    width:100%;
    text-align:center;
}

#ctxtmen {
  position: absolute;
  top:40px;
  left:90px;
  z-index: 10;
  width:160px;
  height:20px;
}
.invisible {display:none;}
ul {   
  width:160px;
  margin: 0;
  padding: 0;
  text-align:center;
  background-color: #ABB8CE;
  list-style: none;
}
li:hover {
    color: #FFF;
    background-color: #9FB0CE;
    cursor: default;
}
li:active {    
  color: #CCC;
  background-color: #ABB8CE;
}


.name {
    margin:10px 0 10px;
    padding: 9px 0 9px;
    background-color:#6D7F9D;
    color:white;
    font-weight:bold;
}
.a {
    display: inline-block;
    vertical-align: top;
    width:45%;
}
.b {
    display: inline-block;
    vertical-align: top;
    width:45%;
}
.cont {
    margin:10px 0 10px;
    padding:4px 0 4px;
}
.item {
    width: 90%;
    margin:0 auto;
}
.eagle {
    margin-top:3px;
    background-color:#465977;
    color:white;
}
.lion {
    margin-top:3px;
    background-color:#b49763;
    color:white;
}
.parrot {
    margin-top:3px;
    background-color:#9DBC7C;
    color:white;
}
.flamingo {
    margin-top:3px;
    background-color:#B9718A;
    color:white;
}
form {
    width:50%;
    margin:12px auto;
    padding:12px;
    text-align:center;
}
input:nth-child(1) {
    display:block;
    margin: 10px auto;
}
input:nth-child(2) {
    display:block;
    margin: 10px auto;
}
button {
    display:block;
    margin:10px auto;
}

JavaScript

$(".item").mousedown(function(e){ 
    
  currentItem = $(this);
  if( e.which == 3 ) { 
    $("#ctxtmen").removeClass("invisible").css({top: event.pageY + "px", left: event.pageX + "px"});
  }

  $(document).click(function(){
    $("#ctxtmen").addClass("invisible");
    if( e.which == 2 ){
      $("#ctxtmen").addClass("invisible");
    }
  });
  
  $(document).bind("contextmenu", function(x){
    if (!$("#ctxtmen").hasClass("invisible")) {
      x.preventDefault();    
    }   
  });  
    
});


$("#create").click(function () {

    //Cycles through all checked boxes of name='column'
    $('input[name="column"]:checked').each(function () {
        var outerDiv = $("."+this.value);
        var itemDiv = $('<div/>').addClass("item " + $('#content2').val());
        var contDiv = $('<div/>').addClass("cont").html($("#content").val());
        
        outerDiv.prepend(itemDiv.prepend(contDiv));

        if (this.value == "one") {
            $('.a').append(outerDiv);
        }

        if (this.value == "two") {
            $('.b').append(outerDiv);
        }
    });
    
});