Jquery disable droppable but keep draggable enabled
As an activity for students, I have a set of draggables that need to be matched to a set of droppables. The code below all works fine (for example it allows a student to change a selection) but it also allows a student to put two draggables on one droppable.
$('.drags').draggable({containment:'#container',
revert:function (event, ui) {
$(this).data("dr开发者_JS百科aggable").originalPosition
= {top: 0,left: 0 }; return !event;}});
$('.drops').droppable({accept:'.drags',
drop:function(event, ui){
ui.draggable.position( { of: $(this),
my: 'left top',
at: 'left top'} );},});
If I disable droppable, by including the following code in the 'drop' function
$(this).droppable({ disabled: true });
then the draggable is also disabled which I do not want.
is there any way of limiting the droppable to accepting only one draggable, but still keep the drag enabled?
Thanks
SOLUTION:
I got a solution in the end, which basically involves destroying the droppable when a draggable is dropped into it, and making the element droppable again when the draggable dropped on it is moved. Below is the code, a bit terse but it may help if someone is looking for a solution.
Cheers
$('.drags').draggable({
containment:'#container',
revert:function (event, ui) {
$(this).data("draggable").originalPosition = {top: 0,left: 0 };
return !event;},
start:function(event, ui){ var thisId = this.id;
var dropId = null;
var a = $('#container').data('state');
$.each(a,function(key,value){
if(value==thisId){dropId = key;
a[key]='x';
dropId = '#'+dropId;
$(dropId).droppable({
accept:'.c1yx',
drop:function(event, ui){
var droppedId = ui.draggable.attr('id');
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top'} );
var thisId = this.id;
var a = $('#c1yw').data('state');
$.each(a,function(key,value){if(key==thisId){a[key] =droppedId}});
$(this).droppable( 'destroy')}});}})}});
//set the state for each of the droppables
$('#c1yw').data('state'{c1y9:'x',c1yc:'x',c1yf:'x',c1yi:'x',c1yl:'x',c1yo:'x',c1yr:'x',c1yu:'x'});
$('#c1y9,#c1yc,#c1yf,#c1yi,#c1yl,#c1yo,#c1yr,#c1yu').droppable({
accept: '.drags',
drop: function (event, ui) {
var droppedId = ui.draggable.attr('id');
ui.draggable.position({
of: $(this),
my: 'left top',
at: 'left top'
});
var thisId = this.id;
var a = $('#c1yw').data('state');
$.each(a, function (key, value) {
if (key == thisId) {
a[key] = droppedId
}
});
$(this).droppable('destroy')
} });
精彩评论