JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="drag"></div>

<iframe id="iframe">
<div class="sort_holder"></div>
  
</iframe>

CSS

.drag {
  width: 40px;
  height: 40px;
  background: red;
}

#iframe {
  width: 90%;
  height: calc(100% - 50px);
  position: absolute;
  left: 0;
  bottom: 0
}
.sort_holder {
  width: 100%;
  height: 100px;
  position: relative;
  background: blue
}

JavaScript

$(document).ready(function(){
	var f = $('#iframe').contents().find("body");
  console.info(f)
  f.append('<div class="sort_holder"></div><div class="sort_holder"></div><div class="sort_holder"></div><div class="sort_holder"></div><div class="sort_holder"></div><div class="sort_holder"></div><div class="sort_holder"></div><div class="sort_holder"></div>')
  f.find(".sort_holder").css("width", "100%").css("height", "100px").css("border", "2px solid blue").css("margin-top", "5px");     
  
 
    f.find(".sort_holder").sortable({ 
      items: ".drag", 
      connectWith: f.find(".sort_holder"),
      distance: 10,
      zIndex : 10000,
      scroll        : false,
      tolerance : "intersect",
      start: function(e, ui){
        $(ui.helper).css("width", "40px").css("height", "40px").css("background", "red")
      },
      sort: function(e, ui){

      },
      stop : function(event, ui) {

      },
      receive: function (event, ui) {

      } 
    }); 
  
    $(".drag").draggable({ 
      helper : "clone",
      iframeFix: $('#iframe'),
      iframeOffset: $('#iframe').offset(),
      connectToSortable : f.find(".sort_holder"),
      distance : 10,
      cursorAt: { left: 20, top : 60},
      scroll : false,
      start: function(event, ui) { 

      },
      drag: function(event, ui) { 

      },
      stop: function(event, ui) { 
      
      }
    });  
    
    $('#iframe').contents().on('scroll', function() {
      $(".drag").draggable("option", "cursorAt", { top: -1 * $('#iframe').contents().scrollTop() + 60 });
    });
})