JSFiddle - React, Tailwind, and code Playground

by Tinh Nguyen Nhu

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/jquery-ui.min.js"></script>
<!-- test drag to full screen -->

<div class="parent" style="height: 300px; width: 300px;">
  <div id="draggable" class="ui-widget-content">
    <p>Scroll set to true, default settings</p>
</div>
</div>
<div style="height: 5000px; width: 1px;"></div>

CSS

/* test drag to full screen */
.parent {
  background: #f9f9f9;
  border: 0 solid red;
}


#draggable {
    cursor: move;
    background: green;
    width: 100%;
    height: 80px;
    padding: 0.5em;
    float: left;
    margin: 0 10px 10px 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    
}

#draggable.top30 {
  //position: relative !important;
  //top: 180px !important;
  height: 100%;
  -webkit-transition: all 0.8s ease;
}
#draggable.top0 {
  //position: relative !important;
  //top: 180px !important;
  height: 100px;
  -webkit-transition: all 0.8s ease;
}

JavaScript

// test drag to full screen

$(function () {
    $("#draggable").draggable({
    		revert: true,
    		axis: "y",
        scroll: false,
        opacity: 1.0,
        drag: function( event, ui ) {
          console.log(ui.offset.top);
          
          if (ui.offset.top > 10) {
          	console.log("top > 10");
            $("#draggable").css({"background": "blue", "position": "relative", "top": "500"});
            $("#draggable").removeClass("top0").addClass("top30");
            //$("#draggable").draggable({
            //	"disabled": true
            //});
          } else {
          	$("#draggable").css("background", "green");
            $("#draggable").removeClass("top30").addClass("top0");
          }
          
        }
    });
});