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

Question

I'm currently trying to prove to myself a UI/UX concept that I came up with for a really quick way to rate and sort cards relative to each other.

However as I'm not a coder but designer my skills are limited and I'd appreciate some help with what I'm trying to accomplish here.

Here is the fiddle to look into: https://jsfiddle.net/b3dmo6L8/7/

1.) The current code is probably bad hacked-together jquery, however it brought me as far as this.

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.) My goal now would be to have prototype that does the following:

a.) On the first click on any of the cards, the clicked card will get position number 1 and is set. You can see that with the indicator. The number is always just visible on hover.

b.) However when one card is set, all other positiones of other cards should be relative based on the first initial position of the first clicked card.

And that shuold of course not only work for the numbers 1 and 2 but it should be possible to simply rank them by numbers, the further the click to the right of the card is.

c.) I also included a 2nd indicator once a card got clicked that would allow for a "reposition" of the set indicator. In case you've set the initial click to far to the right.

Here is the fiddle to look into: https://jsfiddle.net/b3dmo6L8/7/

How could I achieve the correct number output and the repositioning of an indicator?

Answer 1

I beleive this is what you are after. The main change i made was your on click function. I added a global cardCount and made it so that if the card hasnt been clicked it sets the number of the card and increments the global variable. If the widths need to be compares in the opposite direction just change the < to >

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

Then to make the counts update depends on widths of other clicks, i added a double loop to go through the widths compare them and see what the new calculated position of the card is like so:

$('.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);
});

I think this solution is suitable for your question.

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