JSFiddle - React, Tailwind, and code Playground

by shravanimmy

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

CSS

#draggable { margin-left:30%;width: 50%; height: 150px; padding: 0.5em; }

JavaScript

var x1=x2=y1=y2=0;
$("#draggable").draggable({
    revert: true,
    revertDuration: 100,
    axis: 'x',
    drag: function (e, ui){
        y2 = ui.position.top;
        x2 = ui.position.left;
        if(x2>100){alert("greater than 100px");}
                if(x2<-100){alert("Lesser than -100px");}
               
    },
    start: function(e, ui) {
        y1 = ui.position.top;
        x1 = ui.position.left;
        
    },
    stop: function(e, ui) {
        
    }
});