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 cropBlock = $('#cropBlock');
  var sliderWrapper = $('#wrapper');

  //startLeft = cropBlock.offset().left;
  
  $('#wrapper').on('mousedown', function(e) {
    startX = e.clientX;
 		startLeft = cropBlock.offset().left;
    
     $('#wrapper').on('mousemove', function(e) {
        var left = startLeft + e.clientX - startX;
        left < 0 && (left = 0);
        left + cropBlock.width() > sliderWrapper.offset().left + sliderWrapper.width() && (left = sliderWrapper.offset().left + sliderWrapper.width() - cropBlock.width());
        cropBlock.css('left', left);
    });
  
    $('#wrapper').on('mouseup', function(e) {
      $('#wrapper').off('mousemove');
      $('#wrapper').off('mouseup');
    });
  });*/
  
/*
  $('#wrapper').on('mousedown', function(e) {
    startX = e.clientX;
    e.preventDefault();
  });
  
  $('#wrapper').on('mousemove', function(e) {
    var left = startLeft + e.clientX - startX;
    left < 0 && (left = 0);
    left + cropBlock.width() > sliderWrapper.offset().left + sliderWrapper.width() && (left =...