Mousemove 相对于 set 元素（如果值大于或小于）

Question

我目前正在尝试向自己证明一个 UI/UX 概念，我想出了一个非常快速的方法来相对于彼此对卡片进行评分和排序。

然而，由于我不是编码员而是设计师，所以我的技能有限，对于我正在努力完成的工作，如果能提供一些帮助，我将不胜感激。

这里是要查看的 fiddle：https://jsfiddle.net/b3dmo6L8/7/

1.) 当前的代码可能是糟糕的组合 jquery，但是它让我走到了这一步。

HTML

<div class="card">
  <span class="pos">
    <span class="num">1</span>
  </span>
  <span class="repos"></span>
</div>

jQuery

$('.card').each(function() {
    var clicked = false;

    // follow the mouse
        $(this).on( "mousemove", function( e ) {
        if (clicked == false) {
            $('.pos', this).css('width', e.pageX);
        }
        $('.repos', this).css('width', e.pageX);
    });

    $(this).on( "mouseleave", function( e ) {
        if (clicked == false) $('.pos', this).css('width', 0);
    });

    //…

2.) 我现在的目标是拥有执行以下操作的原型：

a.) 第一次点击任何卡片时，点击的卡片将获得位置编号 1 并被设置。您可以通过指标看到这一点。数字总是在悬停时可见。

b.) 但是当一张卡片被设置时，其他卡片的所有其他位置应该相对基于第一个点击卡片的第一个初始位置。

当然，这不仅适用于数字 1 和 2，而且应该可以简单地按数字对它们进行排名，点击卡片右侧的距离越远。

c.) 我还包含了第二个指示器，一旦卡片被点击，这将允许设置指示器的 "reposition"。如果您将初始点击设置为最右侧。

这里是要查看的 fiddle：https://jsfiddle.net/b3dmo6L8/7/

如何实现正确的数字输出和指标的重新定位？

Answer 1

我相信这就是您想要的。我所做的主要更改是您的点击功能。我添加了一个全局 cardCount 并进行了设置，以便如果尚未单击卡片，它会设置卡片的编号并递增全局变量。如果需要在相反方向比较宽度，只需将 < 更改为 >

if(clicked){
    //$('.pos', this).css('width', e.pageX);
}else{
    window.cardCount++;
    $('.num', this).text(window.cardCount);
}

然后为了使计数更新取决于其他点击的宽度，我添加了一个双循环来比较它们的宽度，看看卡片的新计算位置是这样的：

$('.card').each(function() {
  var width = $('.pos', this).width();
  var newPos = 1;
  $('.card').each(function() {
    if($('.pos', this).width() > 0){
      if($('.pos', this).width() < width){
        newPos++;
      }
    }
  });
  $('.num', this).text( newPos);
});

我认为这个解决方案适合你的问题。

$( document ).ready(function() {
 window.cardCount = 0;
 // Clone card 5 times
  var $card = $(".card");
  for(var i = 0; i < 5; i++){
      $card.clone().appendTo('#wrap');
  }

 // For each card
 $('.card').each(function() {
    var clicked = false;
    var card = this;
    $('.cancel', this).on('click', function(e){
          window.cardCount--;
          $('.pos', card).css('width', e.pageX);
          $('.repos', card).css('width', 0);
          clicked = false;
          e.stopPropagation();
    });
    
    // follow the mouse
  $(this).on( "mousemove", function( e ) {
        if (clicked == false) {
         $('.pos', this).css('width', e.pageX);
        }else{
          $('.repos', this).css('width', e.pageX);
        }
        
        $('.card').each(function() {
          var width = $('.pos', this).width();
          var newPos = 1;
          $('.card').each(function() {
            if($('.pos', this).width() > 0){
              if($('.pos', this).width() > width){
                newPos++;
              }
            }
          });
          $('.num', this).text( newPos);
        });
    });
    
    $(this).on( "mouseleave", function( e ) {
        if (clicked == false) $('.pos', this).css('width', 0);
    });
    
    $(this).on( "click", function(e) {
        if(clicked){
     $('.pos', this).css('width', e.pageX);
        }else{
          window.cardCount++;
         $('.num', this).text(window.cardCount);
        }
        
        clicked = true;
        $('.repos', this).css({
         'display':'inline-block',
          'width': 0,
          });
          
        $('.card').each(function() {
          var width = $('.pos', this).width();
          var newPos = 1;
          $('.card').each(function() {
            if($('.pos', this).width() > 0){
              if($('.pos', this).width() > width){
                newPos++;
              }
            }
          });
          $('.num', this).text( newPos);
        });
    });
    
    $(this).hover(
      function() {
        $('.num', this).fadeIn(50);
      }, function() {
        $('.num', this).fadeOut(50);
      }
  );
    
  });
});

#wrap { margin: 50px auto; width: 100%; }

.card {
  width: 1000px;
  border: 1px solid #ccc;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
  border-radius: 2px;
  height: 90px;
  margin-bottom: 15px;
  position: relative;
}

.pos, .repos {
  height: 90px;
  display: inline-block;
  width: 0;
  border-right: 2px solid #007ED7;
  background: rgba(0, 126, 215, .1);
  -webkit-transition: width .1s; /* Safari */
  transition: width .1s;
}

.pos, .repos { 
  position: absolute; 
  top: 0; 
  left: 0; 
}

.pos { z-index: 2; }
.repos { 
  display: none; 
  background: rgba(0, 0, 0, .1); 
  z-index: 1; 
}

.num { 
  font-family: sans-serif; 
  display: none;
  float: right;
  margin-right: -20px;
  margin-top: 10px;
  color: #007ED7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">

<div class="card">
  <span class="pos">
    <span class="num"></span>
    <span class="cancel">x</span>
  </span>
  <span class="repos"></span>
</div>

</div>

Mousemove 相对于 set 元素（如果值大于或小于）

Mousemove relative to set element (if value is more or less)

html

jquery

user-interface

user-experience