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.
  $.widget( "ui.draggable", $.ui.draggable, {
    _create: function() {
      this._super();
      //override to set documentContext
      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;

      for (var i = 0, framesLen = window.frames.length; i < framesLen; i++) {
        frame = window.frames[i];
        if (frame.document === that.documentContext) {
          that.documentOffset = $(frame.frameElement).offset();
        }
      }
    },


    _mouseUp: function(event) {
      // got rid of === so that iframeFix works with selector as well as boolean
      if (this.options.iframeFix) {
        $("div.ui-draggable-iframeFix").each(function() { 
          this.parentNode.removeChild(this); 
        }); //Remove frame helpers
      }
      
      // debugger
      //If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003)
      if( $.ui.ddmanager ) $.ui.ddmanager.dragStop(this, event);
      
      return $.ui.mouse.prototype._mouseUp.call(this, event);
    },


    _mouseDown: function(event) {
      event.pageX = event.pageX + this.documentOffset.left;
      event.pageY = event.pageY + this.documentOffset.top;
      var retVal = this._super.call(this, event);
      $(document).unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);
      var that = this;

      this._mouseUpDelegate = function(event) {
        // special case when we need to pass...