JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<form>
    <div>
        
        <div id="pai">
            <div id="filho">
                teste de drag
            </div>      
        </div>
    </div>
</form>

CSS

#pai {width: 200px;
height: 200px;
background-color: red;}

#filho {width: 100px;
height: 100px;
background-color:blue;}

JavaScript

$(document).ready(function() {

    

   
    
    $("#filho").bind("dragcreate", function(event, ui) {
        //alert("VAAAAAAAAAAAI!");
    });
    
     $("#pai").bind( "mousedown", function(event) {  
		$("#filho").trigger(event);  
	});
    
    //$("#filho").draggable( { scroll: true } );
   $('#filho').draggable({
       containment: 'parent',     
       stop: function(event, ui) {
                var dragged = ui.helper;
                var dragged_data = dragged.data('draggable');
                var direction = (dragged_data.originalPosition.left > dragged.position().left) ? 'left' : 'right';

                //alert(direction);
            }
        }); 
    
   
    
    
});