JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div id="wrapper">
  <div id="cropBlock">
    <span id="resizeBtn"></span>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#cropBlock {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background: url('http://i641.photobucket.com/albums/uu137/R3GYZZ/lobo-cara-r-500x400.jpg');
  background-position: -200px -200px;
  background-repeat: no-repeat;
  cursor: move;
}

#wrapper {
  /*width: 500px;*/
  margin: 0 auto;
  width: 300px;
  height: 400px;
  background: url('http://i641.photobucket.com/albums/uu137/R3GYZZ/lobo-cara-r-500x400.jpg') center center no-repeat;
  position: relative;
  overflow: hidden;
}

#wrapper:before {
  position: absolute;
  content: "";
  background: rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

JavaScript

/*
var startX, startLeft;
var cropBlock = document.getElementById('cropBlock');
var sliderWrapper = document.getElementById('wrapper');

cropBlock.addEventListener('mousedown', initDrag, false);

function initDrag(e) {
  startX = e.clientX;
  startLeft = cropBlock.offsetLeft;
  document.documentElement.addEventListener('mousemove', doDrag, false);
  document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
  var left = startLeft + e.clientX - startX;
  left < 0 && (left = 0);
  left + cropBlock.offsetWidth > sliderWrapper.offsetLeft + sliderWrapper.offsetWidth && (left = sliderWrapper.offsetLeft + sliderWrapper.offsetWidth - cropBlock.offsetWidth);  
  cropBlock.style.left = left + 'px';
}

function stopDrag(e) {
  document.documentElement.removeEventListener('mousemove', doDrag, false);
  document.documentElement.removeEventListener('mouseup', stopDrag, false);
}*/



$(function() {
  var startX, startLeft;
  var $slider = $('#cropBlock');
  var $sliderWrapper = $('#wrapper');

  //startLeft = cropBlock.offset().left;

  $slider.on('mousedown', function(e) {
    startX = e.clientX;
    /*startLeft = $slider.offset().left;*/
    startLeft = $slider.position().left;

    $slider.on('mousemove', function(e) {
      var left = startLeft + e.clientX - startX;
      /*left < 0 && (left = 0);
      left + $slider.width() > $sliderWrapper.offset().left + $sliderWrapper.width() && (left = $sliderWrapper.offset().left + $sliderWrapper.width() - $slider.width());*/
      if (left < 0) {
        left = 0;
      }
      /*if (left + $slider.width() > $sliderWrapper.offset().left + $sliderWrapper.width()) {
        left = $sliderWrapper.offset().left + $sliderWrapper.width() - $slider.width();        
      }*/
      if (left + $slider.width() > $sliderWrapper.position().left + $sliderWrapper.width()) {
        left = $sliderWrapper.position().left + $sliderWrapper.width() - $slider.width();        
      }
      $slider.css('left',...