屏幕左侧可拖动（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>