我创建了一个阻力,以开始自学jQuery的下降游戏。 一切似乎都在工作,但你可以将多个项目在同一广场。 我想禁用可放开如果占位符中有一个图像。
我已经研究过:
`greedy: true`
禁用下降,但我不知道再怎么也启用它:
$(this).droppable( 'disable' );
我可以得到这些都禁用下降,但不知道我怎么得到,如果块/图像恢复到原来的位置或移动到另一个方形他们再次启用它。
完整版: http://creativelabel.co.uk/drag-and-drop/
UPDATE:这是可放开插槽的代码。
for ( var i=0; i<=19; i++ ) {
var images = 'images/slot' + slotNumbers[i] + '.jpg';
$('<div class="placeholder"><div class="img-slot"></div></div>').attr('id', 'slot'+slotNumbers[i]).data( 'slotNumbers', slotNumbers[i] ).appendTo( '#imgSlots' ).droppable( {
accept: '#images img',
hoverClass: 'hovered',
drop: handleDropEvent,
activate: handleDragEvent
});
这是drop:
事件代码:
function handleDropEvent( event, ui ) {
var slotNumber = $(this).data( 'slotNumbers' );
var imgNumber = ui.draggable.data( 'number' );
ui.draggable.addClass( 'dropped' );
$(this).droppable( 'disable' );
ui.draggable.position( { of: $(this), my: 'right top', at: 'right top' } );
if ( slotNumber == imgNumber ) {
ui.draggable.addClass( 'img-match' );
ui.draggable.data("valid", true);
imgMatch++;
} else {
if(ui.draggable.data("valid")) {
imgMatch--;
ui.draggable.data("valid", false);
}
}
该activate:
代码:
function handleDragEvent( event, ui ) {
$(this).droppable( 'enable' );
if(ui.draggable.data("valid")) {
imgMatch--;
$('input[name=Score]').val(imgMatch);
$('#score h1').text(imgMatch);
ui.draggable.data("valid", false);
}
}