JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<div class="wrap">
    <div class="content"></div>
 </div>

CSS

body {
            padding: 100px;
        }

        .wrap {
            width: 220px;
            /* overflow: hidden; */
            padding: 5px 0;
            background: #ccc;
            margin-bottom: 30px;
            overflow: hidden;
        }

        .content {
            width: 300px;
            height: 30px;
            background: #000;
            position: relative;
            left: 0;
        
        }

JavaScript

var wrap = $('.wrap');
var wrapOffset = wrap.offset();

            var content = $('.content');
            var wrapWidth = wrap.width();
            var contentWidth = content.width();
            
            var min = 0;
            var max = contentWidth - wrapWidth;

            var isMouseDown = false; // флаг - мышь нажата
            var curX = 0; // позиция мыши в момент клика
            var posX = 0; // позиция контента в момент клика

            content.on('mousedown', function(e){
                isMouseDown = true;
   							posX = +content.css('left').replace(/px/, '');
                curX = e.pageX - wrapOffset.left;
            });
            
						content.on('mousemove', function(e){
              if (isMouseDown == true) {
   							var newX = e.pageX - wrapOffset.left; // новое местоположение мыши
                var deltaX = newX - curX; // изменение местоположения 
                content.css('left', posX + deltaX);
              }
            });                       
						
            content.on('mouseup mouseleave', function(){
            	isMouseDown = false;
            });