JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<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;
  }
  #container {
      border: 1px solid blue;
      height: 200px;
  }

JavaScript

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