2017-11-25 269 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

相關問題