问可拖动的屏幕左侧(JQuery)

EN

$(document).ready(function(){
    var currentDiff;
    var currentOpacity;
    
    $("#event_container .content .card").draggable({
        drag: function(el, ui){
            var cardWidth = $(this).width();
            var bodyWidth = $("body");
            var rightOverlay = $(this).offset().left + (cardWidth * .6);
            var leftOverlay = ($(this).offset().left - cardWidth) / 6;
            if(rightOverlay > cardWidth){
                var widthDiff = rightOverlay - cardWidth;
                
                if(!$("#interested-message").is(":visible")){
                    currentDiff = 0;
                    currentOpacity = 0;
                }
                if(widthDiff > 175){
                   if(currentDiff === 0){
                       currentOpacity = 0.1;
                       $("#interested-message").addClass("interested").css("opacity", currentOpacity).text("Interested").show();
                       currentDiff = widthDiff;
                   } else if((currentDiff + 20) > currentDiff) {
                       if(currentOpacity !== 1){
                           currentOpacity = currentOpacity + 0.1;
                           $("#interested-message").addClass("interested").css("opacity", currentOpacity);
                            currentDiff = widthDiff;
                       }
                   }
                } else {
                    $("#interested-message").css("opacity", 0).hide().text("....");
                }
            } else {
                $("#interested-message").css("opacity", 0).hide().text("....");
            }
            
            if(leftOverlay > cardWidth){
                var widthDiff = leftOverlay - cardWidth;
                console.log(widthDiff);
            } else {
                console.log(leftOverlay);
            }
        }
    });
});

#interested-message{
    display: none;
    position: absolute;
    width: auto;
    padding: 5px 15px!important;
    z-index: 100;
    border-radius: 6px;
    font-size: 30px;
    top: calc(45% - 100px);
    left: calc(25% - 100px);
    opacity: 0;
}
#interested-message.interested{
    display: block;
    border: 2px solid #0b9c1e;
    color: #0b9c1e;
}
#interested-message.not-interested{
    display: block;
    border: 2px solid #d93838;
    color: #d93838;
}

#body{
  width: 250px;
  height: 600px;
  max-width: 250px;
  max-height: 600px;
  border: 2px solid black;
  overflow: hidden;
}

#event_container{
  height: 100%;
  width: 100%;
  background: lightblue;
  padding: 50px;
}

#event_container .content{
  position: relative;
}
#event_container .content .card{
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="body">

<div id="event_container">
    <div id="interested-message">....</div>
    <div class="content">
        
        <div class="card">
        
          Test card
        
        </div>
    </div>
</div>

</div>