Run over and out only on a certain accept with jQuery ui droppable

Question

   $(function() {
    $( "#d1o1" ).droppable({

        accept: "#s1o2, #s1o1, #s1o3, #s1o4, #s1o5, #s1o6",

        over: function (){
            $( "#d1o1" ).droppable( "option", "d1o1Check", "1" );
        },
        out: function () {
            $( "#d1o1" ).droppable( "option", "d1o1Check", "0" );
        },

    })
 });

At the moment the droppable #d1o1 accepts all the draggables because I would like them to stay put when dropped. However, I only want the 'over' and 'out' functions to run when #s102 is dropped. How is it possible to accept all draggables but only run over and out when a certain drag is dropped?

Answer 1

When ever a draggable is moved over droppable then you can check if it is eligible for the over and out function as:

$(function() {
$( "#d101" ).droppable({

    accept: "#s102, #s101, #s103, #s104, #s105, #s106",

    over: function (event, ui){ // Don't forget to add these parameters for the function
        if($(ui.helper).is('#s102')) // <-- Add this line
            $( "#d101" ).droppable( "option", "d1o1Check", "1" );
    },
    out: function (event, ui) { // Don't forget to add these parameters for the function
        if($(ui.helper).is('#s102')) // <-- Add this line
            $( "#d101" ).droppable( "option", "d1o1Check", "0" );
    },

});
$('.drag').draggable();
});

Here is working jsFiddle