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