javascript - 可拖动的屏幕左侧(JQuery)

Question

我想知道是否有人可以帮助我计算出屏幕左侧 的偏移量。我目前已经完成了右侧，您可以看到下面的示例。但是，我希望 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>