鼠标移动相对于设置元素(如果值是或多或少)
问题描述:
我目前正试图向自己证明一个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并被设置。你可以看到这个指标。这个数字总是只在悬停时可见。
湾)然而,当一个卡被设置的其它卡的所有其他positiones应该基于所述第一的第一初始位置是相对于点击卡。
当然是shuold不仅为数字1和2,但工作应该是可以简单地用数字来对他们进行排名,进一步点击该卡的权利。
c。)一旦卡片被点击后,我还包括一个第二个指示器,可以对设置指示器进行“重新定位”。如果您将初始点击设置在最右边。
这里是小提琴考虑:https://jsfiddle.net/b3dmo6L8/7/
我怎么能做到正确的数字输出和指标的重新定位?
答
我相信这是你以后的样子。我做的主要改变是你的点击功能。我添加了一个全局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>
没错。非常感谢。你有什么想法如何第二次点击卡可以重置位置?如何做到这一点?想象一下,第一次点击太过正确,那么我不能设置一个新的位置 - 在这种情况下,我想“重新定位”卡片上的第一次点击以进一步向左...您知道我的意思吗? – matt
@matt看修改答案:) – Deckerz
真棒:)很棒。 – matt