画面のドラッグ可能な左側（JQuery）

Question

私は誰かが画面のleftのオフセットを解決するのを助けることができるのだろうかと思っています。私は現在rightのサイドを完了しています。下の例を見ることができます。しかし、私はleftの側にも同じように、 "興味がない"と言ってほしい。

誰かが正しい方向に向いているか、これを達成するのを手伝ってもらえますか？

もし誰かが私の現在のコードについてフィードバックしたいのであれば、これを行うにはより良い方法があれば。

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

誰もが興味を持っているならば、私は答え自分で作ってみました。私はまた、コードの一部を書き直して、ちょっと綺麗に見えるようにコードを改良しました。

-230をif(widthDiff < -230)に動的に追加することができ、105をif(widthDiff > 105)に追加することもできます。この例ではこれを追加していません。

完全版：

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