我创建了一个拖放游戏,以便开始自学 jquery。一切似乎都正常,但你可以将多个元素放到同一个方 block 上。如果占位符中有图像,我想禁用 droppable。
我调查过:
`greedy: true`
这会禁用转换,但我不确定如何再次启用它:
$(this).droppable( 'disable' );
我可以让它们都禁用放置,但不确定如果 block /图像恢复到其原始位置或移动到另一个方 block ,如何让它们再次启用它。
完整版: http://creativelabel.co.uk/drag-and-drop/
更新: 这是可放置插槽的代码。
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);
}
}
激活:
代码:
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);
}
}
最佳答案
docs (查看“方法”选项卡)表明要禁用您使用:
$(this).droppable( 'disable' );
并让您能够使用
$(this).droppable( 'enable' );
<小时/>
更新:检查这个实例:http://jsfiddle.net/QqJRs/ 将其中一个红色方 block 拖到大框中并将其放下(它变成绿色表示已放下)。当其中一个在里面时,你不能将任何其他人扔到这个盒子里。 现在将其拖出(它变回红色表示已删除)。现在您可以将其他任何一个放在原来的位置。
问题的关键正如我在下面的评论中所描述的那样;当您将某个项目放入容器中时,将容器与该项目关联起来:
drop: function(event,ui){
ui.draggable.addClass( 'dropped' ); // taken from your code & I used to change color
ui.draggable.data('droppedin',$(this)); // associate the container
$(this).droppable('disable'); // disable the droppable
}
然后,当您再次拖动它时,取消关联并重新启用:
drag: function(event,ui){
if($(this).data('droppedin')){
$(this).data('droppedin').droppable('enable'); v// re-enable
$(this).data('droppedin',null); // de-associate
$(this).removeClass( 'dropped' ) // remove class
}
}
关于jquery - 如果 div 已经被放置,则禁用放置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12639533/