JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.3/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.3/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.3/utils/Draggable.min.js"></script>
<div id="box"> <a href="#"></a></div>
CSS
#box { width: 100px; height: 100px; background: #ccc; position:relative; }
a{width:100%; height:100%; position:absolute;}
JavaScript
Draggable.create('#box', {
onClick: function(){
alert('draggable click');
$('a').css('pointer-event', 'none');
},
onDragStart: function(e){
$('#box').addClass("dragging");
},
onDragEnd: function(e){
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
$('#box').removeClass("dragging");
}
})
$(document).on("click", '#box.dragging', function(){
e.stopPropagation();
e.preventDefault();
//return false;
alert('native click');
});