JSFiddle - React, Tailwind, and code Playground

by joshgreifer

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="over" style="top: 300px;"><p>Dragging pointer here shouldn't fire over(), but does</p></div>
<div class="over" style="left: 300px;"><p>Red box can be dragged here</p></div>
<div id="draggable"><p>Drag me (constrained to X axis)</p></div>

CSS

#draggable { background: #ff0000; width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.over { background: #ffff00; width: 150px; height: 150px; padding: 0.5em; position: absolute; margin: 10px; }

JavaScript

$(function() {
     $( "#draggable" ).draggable({
         axis: 'x'
     });
    $( ".over" ).droppable({
      tolerance: 'intersect',
      over: function( event, ui ) {
        $( this )
          .find( "p" )
            .html( "over!" );
      }
    });
  });