JSFiddle - React, Tailwind, and code Playground

by Rahul Patil

HTML

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
  <p id="testId" class="ui-widget-header">I can be dragged only by this handle</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>You can drag me around&hellip;</p>
  <p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
</div>

CSS

#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #draggable p { cursor: move; }

JavaScript

$(function() {
    $( "#draggable" ).draggable({ handle: "p",
                                 stop: function(event, ui){
                                  console.log(event);
                                  console.log($(ui.helper[0]).children().attr('id'));
                                 }
                                });
    $( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
    $( "div, p" ).disableSelection();
  });