title: Draggable left side of screen (JQuery)
body: <p>I'm wondering if someone can help me work out the offset of <code>left</code> side of the screen. I've currently got the <code>right</code> side done and you can see the example below. However I want the same for <code>left</code> side with the text saying "Not Interested".</p>
  
  <p>Could someone please point me in the right direction or help me out achieve this? </p>
  
  <p>Also if anyone wants to give feedback on my current code, if they have any better way of doing this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 &gt; cardWidth){
                  var widthDiff = rightOverlay - cardWidth;
                  
                  if(!$("#interested-message").is(":visible")){
                      currentDiff = 0;
                      currentOpacity = 0;
                  }
                  if(widthDiff &gt; 175){
                     if(currentDiff === 0){
                         currentOpacity = 0.1;
                         $("#interested-message").addClass("interested").css("opacity", currentOpacity).text("Interested").show();
                         currentDiff = widthDiff;
                     } else if((currentDiff + 20) &gt; 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 &gt; cardWidth){
                  var widthDiff = leftOverlay - cardWidth;
                  console.log(widthDiff);
              } else {
                  console.log(leftOverlay);
              }
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="body"&gt;
  
  &lt;div id="event_container"&gt;
      &lt;div id="interested-message"&gt;....&lt;/div&gt;
      &lt;div class="content"&gt;
          
          &lt;div class="card"&gt;
          
            Test card
          
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>