JSFiddle - React, Tailwind, and code Playground

by jscheel

HTML

<script src="http://code.jquery.com/ui/1.9.0-rc.1/jquery-ui.min.js"></script>
<div class="dragger"></div><div class="dragger"></div><div class="dragger"></div>
<div class="dropzone"></div>

JavaScript

(function($) {
  // All of this would actually be unnecessary
  // since new widgets detect the owner document
  // but this isn't going to be stable for a
  // very long time.


  $.fn.extend({
    _scrollParent: $.fn.scrollParent,
    scrollParent: function(){
      var retVal = this._scrollParent.apply(this, arguments);
      if (retVal[0].nodeType === document.DOCUMENT_NODE) {
        retVal = $(this[0].ownerDocument);
      }
      return retVal;
    }
  });


  $.widget( "ui.droppable", $.ui.droppable, {
    _create: function() {
      this._super();
      //override to set documentContext
      if (this.options.documentContext) {
        this.documentContext = this.options.documentContext;
      }
      else {
        var element = this.element[0], documentFound = false;
        while ( element && (element = element.parentNode) ) {
          if (element.nodeType === document.DOCUMENT_NODE) {
            documentFound = true;
            break;
          }
        }
        if (documentFound) {
          this.documentContext = element;
        }
        else {
          this.documentContext = document;
        }
      }

      this.documentOffset = {top: 0, left: 0};
      var that = this;

      $(this.options.recognizeIframes).each(function(idx, iframe){
        if (iframe.contentWindow.document === that.documentContext) {
          this.elementInParent = iframe;
          that.documentOffset = $(iframe).offset();
        }
      });
    }
  });


  // Additional option: recognizeIframes: jquery selector
  // this options will make the draggable aware of other
  // iframes it may need to interact with during dragging
  $.widget( "ui.draggable", $.ui.draggable, {
    _create: function() {
      this._super();
      //override to set documentContext

      if (this.options.documentContext) {
        this.documentContext = this.options.documentContext;
      }
      else {
        if (this.element[0].ownerDocument) {
          this.documentContext =...