我正在使用jQuery UI卡片拖放插件创建一个非常简单的匹配游戏。我想使卡片落下的吸附过渡更加平滑,以便当您将正确的卡片拖放到正确的位置时,它可以稳定地移动到位。
这里是一个JSFiddle http://jsfiddle.net/AyN2a/ 任何帮助都将不胜感激。谢谢。
这里是一个JSFiddle http://jsfiddle.net/AyN2a/ 任何帮助都将不胜感激。谢谢。
// Create the slots
var words = [ '<img src="images/image1.png" width="200px" height="200px" alt="">', '<img src="images/image2.png" width="200px" height="200px" alt="">', '<img src="images/image3.png" width="200px" height="200px" alt="">', '<img src="images/image4.png" width="200px" height="200px" alt="">', '<img src="images/image5.png" width="200px" height="200px" alt="">', '<img src="images/image6.png" width="200px" height="200px" alt="">', '<img src="images/image7.png" width="200px" height="200px" alt="">'];
for ( var i=1; i<=7; i++ ) {
$('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}
function handleCardDrop( event, ui ) {
var slotNumber = $(this).data( 'number' );
var cardNumber = ui.draggable.data( 'number' );
if ( slotNumber == cardNumber ) {
ui.draggable.addClass( 'correct' );
ui.draggable.draggable( 'disable' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
ui.draggable.draggable( 'option', 'revert', false );
correctCards++;
}
if ( correctCards == 7 ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
width: '150px',
height: '150px',
opacity: 1
} );
}
}