i want the AAA box to disable only when in the corresponding black AAA box. same with the BBB.
my issues: example: when i drop AAA into AAA, it also lets me drop BBB into AAA and becomes disabled. I only want the draggable to disable when it is dropped in its corresponding black box.
does anyone know how i can fix this or have a more efficient way of doing this? ultimately, i would like to make a puzzle through drag and drop.
http://jsfiddle.net/rlum01/UDqWb/1/
$(function() {
//Drag 1
$( "#draggable" )
.draggable({ snap: "#snap-one", snapMode: "inner", snapTolerance: 5 });
//Drag 2
$( "#draggable2" )
.draggable({ snap: "#snap-two", snapMode: "inner", snapTolerance: 5 });
//Drop 1
$( "#snap-one" ).droppable({
drop: function( event, ui ) {
var top = $('#draggable').css('top')
,left = $('#draggable').css('left');
if (top === '-107px'){
if(left === '0px'){
$(ui.draggable).draggable('disable');
if ($('#draggable').hasClass('ui-draggable-disabled')){
alert('hello');
}
}
}
}
});
//Drop 2
$( "#snap-two" ).droppable({
drop: function( event, ui ) {
var top = $('#draggable2').css('top')
,left = $('#draggable2').css('left');
if (top === '-107px'){
if(left === '0px'){
$(ui.draggable).draggable('disable');
}
}
}
});
});
any advice is appreciated. thanks!
$( "#snap-one" ).droppable({
accept: "#draggable",
drop: function( event, ui ) {
var top = $('#draggable').css('top')
,left = $('#draggable').css('left');
if (top === '-107px'){
if(left === '0px'){
$(ui.draggable).draggable('disable');
if ($('#draggable').hasClass('ui-draggable-disabled')){
alert('hello');
}
}
}
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.