JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<h1>How to fix drag (disable) in the block?</h1>
<div id="block">
    <div id="border">
        <div id="drag" style="left:200px;">some text</div>
    </div>
</div>

CSS

h1, #drag {
    font: bold 1.0em arial, helvetica, tahoma, verdana, sans-serif;
    margin: 10px 0px;
    text-align: center;
}
#block {
    border: 1px solid #DDD;
    overflow: hidden;
    width: 100%;
}

#border {
    border: 1px solid red;
    margin: 0px auto;
    overflow: hidden;
    width: 90%; /*important*/
    height: 45px;
}

#drag {
    background: #DDD;
    cursor: default;
    position: absolute;
    top: 42px;
    width: 54px;
    height: 45px;
}

JavaScript

$(function() {
    var x = 0,
        drag = 0,
        runner = $('#drag').hide(),
        boundary = $('#border');
    
    runner.mousemove(function(event) {
        x = event.clientX + $(document.body).position().left - parseInt($(this).css('left'));
        drag = true;
        if (typeof event.preventDefault != 'undefined') {
            event.preventDefault();
            return false;
        }
    });
    
    runner.ondragstart = function() {
        return false;
    };
    
    $('#border').live('mouseover ', function(){
         runner.show();
          $(this).one("mouseout", function(){
                runner.hide();
          });
     });
    
    
    $(document).mouseup(function() {
        drag = false;
    });
    
    $(document).mousemove(function(event) {
        var eleft = event.clientX + $(document.body).position().left - x;
        if (eleft > boundary.offset().left && (eleft + runner.width() < boundary.offset().left + boundary.width()) ) {
            if(drag){
                runner.css('left', eleft + 'px');
            }
        }
    });
});