JSFiddle - React, Tailwind, and code Playground

by rao b

HTML

<div id="calender">
                <div id="title">Jane's Daily Diary</div>
                <div class="hourText">1 AM</div>
                <div class="hourText">2 AM</div>
                <div class="hourText">3 AM</div>
                <div class="hourText">4 AM</div>
                <div class="hourText">5 AM</div>
                <div class="hourText">6 AM</div>
                <div id="hourOne" class="hour">

                </div>
                <div id="hourTwo" class="hour">

                </div>
                <div id="hourThree" class="hour">

                </div>
                <div id="hourFour" class="hour">

                </div>
                <div id="hourFive" class="hour">

                </div>
                <div id="hourSix" class="hour">

                </div>
                <div class="hourText">7 AM</div>
                <div class="hourText">8 AM</div>
                <div class="hourText">9 AM</div>
                <div class="hourText">10 AM</div>
                <div class="hourText">11 AM</div>
                <div class="hourText">12 PM</div>
                <div id="hourSeven" class="hour">

                </div>
                <div id="hourEight" class="hour">

                </div>
                <div id="hourNine" class="hour">

                </div>
                <div id="hourTen" class="hour">

                </div>
                <div id="hourEleven" class="hour">

                </div>
                <div id="hourTwelve" class="hour">

                </div>
                <div class="hourText">1 PM</div>
                <div class="hourText">2 PM</div>
                <div class="hourText">3 PM</div>
                <div class="hourText">4 PM</div>
                <div class="hourText">5 PM</div>
                <div class="hourText">6 PM</div>
                <div id="hourThirteen" class="hour">

                </div>
                <div id="hourFourteen" class="hour">

                </div>
  ...

CSS

#calender{
      width : 100%;
      height :400px;
      float :left;
      background :yellow;
  }
  #title{
      width : 100%;
      font-size : 20px;
      font-weight : bold;
      text-align : center;
  }

  .hourText{
      width : 110px;
      margin-left : 2px;
      margin-right : 2px;
      margin-top : 0;
      margin-bottom : 0;
      border : 1px solid;
      display : inline-block;  
       z-index : -1;
      background : blue;
      color : white;

         /*width : 110px;
    margin : 2px;
    border : 1px solid;
    display : inline-block;
    z-index : -1;
    background :blue;
    color : white;*/
  }

  .hour{
    width : 110px;
    height : 60px;
    margin : 2px;
    border : 1px solid;
    display : inline-block;
    vertical-align : top;
    z-index : -1;
} 

 #activityContainer{
      width : 100%;
      height :auto;
      float :left;  
      clear :left;
      background :blue;
     

      
  }
  
  .activitiesDIV{
      white-space: nowrap;
	overflow-y: hidden;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch;
  }

  .ui-page-theme-a .ui-btn.ui-btn{
    background-color: #FF3456;
}

  .activityTab{
      width : 100px !important;
      height : 20px;
      padding-top: 1px !important;
      padding-bottom: 1px !important;
      background:transparent !important;
      color:white !important;
  }



  .activityPic{
      width : 78px;
      height :78px;
    background : black;

  }

JavaScript

$(document).ready(function() {

     $(".activityPic").draggable({
          helper: 'clone',
                delay: 300,
                opacity: 0.35,
                appendTo: 'body',
                revert : "invalid"
         
    });
    
              $(".hour").droppable({
                drop: function (event, ui) {
                    var draggableId = ui.draggable.attr("id");
                    var droppableId = $(this).attr("id");
                    alert("" + draggableId + " " + droppableId);
                    //resize the image
                    var $clonedImage = $(ui.draggable).clone();

                    $clonedImage.height(25);
                    $clonedImage.width(25);

                    //get the count of activities in an hour(limiting it to two activities in an hour)
                    var childCount = $("#hourOne > img").length;
                    alert("chil count : " + childCount);
                    $(this).append($clonedImage);
                    //$clonedImage.appendTo("#hourEighteen");
                    //if (draggableId == "picOneOne" && childCount < 2) {

                    //    //$(this).css("background-color", "yellow");

                    //    //$(this).append($(ui.draggable).clone());
                    //    $(this).append($clonedImage);





                    //    //   $(this)
                    //    //.addClass("ui-state-highlight")
                    //    //.find("p")
                    //    //  .html("Dropped!");
                    //}

                }
            });
});