JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="mycontainer" class="mycontainer">
  <iframe id="iframewindow" src="/echo/html/" frameborder="0" width="100%" height="100%"></iframe>
</div>

<div id="draggable" class="ui-state-highlight">Drag Me</div>

CSS

.mycontainer {
  border: 1px dashed #ccc;
  width: 200px;
  height: 200px;
}

#draggable {
  margin: 5px;
  padding: 5px;
  width: 150px;
}

JavaScript

/**
 * Code to populate iFrame, mimics actual SRC
 */
var frameHTML = "<div id='sortable'><div class='portlet'>some content</div></div>";

var $iframe = iframewindow;
$iframe.ready(function() {
  $iframe.contents().find("body")[0].innerHTML = frameHTML;
});
/**
 * End of iFrame code
 */
$(function() {
  $("#draggable").draggable({
    connectToSortable: $iframe.contents().find("#sortable").sortable({
      items: "> div",
      revert: true,
    }),
    helper: "clone",
    iframeFix: true,
    helper: function(event) {
      return "<div class='custom-helper'>I move this</div>";
    },
    revert: "invalid"
  });
  $iframe.contents().find("#sortable").disableSelection();
});