Draggable left side of screen (JQuery)

Question

I'm wondering if someone can help me work out the offset of left side of the screen. I've currently got the right side done and you can see the example below. However I want the same for left side with the text saying "Not Interested".

Could someone please point me in the right direction or help me out achieve this?

Also if anyone wants to give feedback on my current code, if they have any better way of doing this.

 $(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> 

Answer 1

If anyone is interested, I've come up with the answer myself. I've also re wrote some of my code and enhanced it to look a little neater.

the -230 in if(widthDiff < -230) could be dynamically added, and also the 105 in if(widthDiff > 105) . I've not added this for the example.

Complete version:

 $(document).ready(function(){ var currentDiff; var currentOpacity; var interested = false; var notInterested = false; $("#event_container .content .card").each(function(){ $(this).draggable({ drag: function(el, ui){ var cardWidth = $(this).width(); var rightOverlay = $(this).offset().left + (cardWidth * .6); var widthDiff = rightOverlay - cardWidth; if(widthDiff < -230){ notInterested($(this)); } else if(widthDiff > 105){ interested($(this)); } else { reset($(this)); } function notInterested(ele){ $("#interested-message").addClass("not-interested").text("Not Interested").show(); ele.draggable( "option", "revert", false); notInterested = true; } function interested(ele){ $("#interested-message").addClass("interested").text("Interested").show(); ele.draggable( "option", "revert", false); interested = true; } function reset(ele){ $("#interested-message").removeClass("interested").removeClass("not-interested").hide().text("...."); ele.draggable( "option", "revert", true); interested = false; notInterested = false; } } }); }); }); 

 #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(30% - 100px); } #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; margin-left: 50px; } #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>