2017-11-25 264 views
1

我目前正试图向自己证明一个UI/UX的概念,我想出了一个真正快速的方法来评估和排序卡相对于彼此。鼠标移动相对于设置元素(如果值是或多或少)

但是,由于我不是一个编码员,但设计师我的技能是有限的,我会很感激我在这里试图完成的一些帮助。

这里是小提琴考虑: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)我现在的目标是将有原型,执行以下操作:

一)在第一次点击任何点击卡将获得位置号码1并被设置。你可以看到这个指标。这个数字总是只在悬停时可见。

enter image description here

湾)然而,当一个卡被设置的其它卡的所有其他positiones应该基于所述第一的第一初始位置是相对于点击卡。

enter image description here

当然是shuold不仅为数字1和2,但工作应该是可以简单地用数字来对他们进行排名,进一步点击该卡的权利。

c。)一旦卡片被点击后,我还包括一个第二个指示器,可以对设置指示器进行“重新定位”。如果您将初始点击设置在最右边。

这里是小提琴考虑:https://jsfiddle.net/b3dmo6L8/7/

我怎么能做到正确的数字输出和指标的重新定位?

回答

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() { 
 
\t window.cardCount = 0; 
 
\t // Clone card 5 times 
 
    var $card = $(".card"); 
 
    for(var i = 0; i < 5; i++){ 
 
     $card.clone().appendTo('#wrap'); 
 
    } 
 

 
\t // For each card 
 
\t $('.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 
 
\t \t $(this).on("mousemove", function(e) { 
 
     if (clicked == false) { 
 
     \t $('.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){ 
 
\t \t \t \t \t $('.pos', this).css('width', e.pageX); 
 
     }else{ 
 
      window.cardCount++; 
 
     \t $('.num', this).text(window.cardCount); 
 
     } 
 
     
 
     clicked = true; 
 
     $('.repos', this).css({ 
 
     \t '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); 
 
     } 
 
\t \t); 
 
    
 
    }); 
 
});
#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>

+0

没错。非常感谢。你有什么想法如何第二次点击卡可以重置位置?如何做到这一点?想象一下,第一次点击太过正确,那么我不能设置一个新的位置 - 在这种情况下,我想“重新定位”卡片上的第一次点击以进一步向左...您知道我的意思吗? – matt

+0

@matt看修改答案:) – Deckerz

+0

真棒:)很棒。 – matt

相关问题