JSFiddle - React, Tailwind, and code Playground

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<input type="text" id="deger1" /><br/><br/>
<div id="goster">
    
    <img src="http://sites.psu.edu/natmilas23/wp-content/uploads/sites/15324/2014/12/9x13-05.jpg" class="img1 ui-widget-content" />
    
</div>

CSS

body {padding:30px; }
#goster {width:300px;height:200px;overflow:hidden;position:relative; border:0px solid #000; -webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    0px 2px 5px 0px rgba(50, 50, 50, 0.5);
box-shadow:         0px 2px 5px 0px rgba(50, 50, 50, 0.5);}
.img1 { width:500px; height:auto; cursor:move;}

JavaScript

$(function() {
    $("img").draggable(
    
    );
    
    
    $( "img" ).on( "dragstart", function( event, ui ) {
        
        var Stoppos = $(this).position();
        
        $("#deger1").val("deger : " + Stoppos.left) } );
    
  });