get ID of dropped div and hide all other divs without this class

Question

Sorry for the confusing title, I hope I can explain.

http://thetally.efinancialnews.com/tallyassets/suebanks/suebanks.html

In this example you can drag a red box from the right into the grey box at the top left, each red box has a unique ID. When this red box is dropped in, I would like all the black boxes below to disappear EXCEPT the ones who's CLASS matches the unique ID of the red square.

The first box has an ID of 'barclays', as do 2 of the black boxes, so those 2 should remain

The second has an ID of lloyds, so only 1 of those black boxes should remain.

Here is the javascript code I am using:

$(init);
function init() {
    $('.draggable').draggable({
        containment: '#maincontain',
        stack: '.bankbox div',
        cursor: 'move',
        revert: true
    });
    $('.judge').droppable({
        drop: handleDropEvent
    });
}

function handleDropEvent(event, ui) {
    var draggable = ui.draggable;
    ui.draggable.position({
        of: $(this),
        my: 'center bottom',
        at: 'center bottom'
    });
    alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
}

...so what I need to do is get the 'draggable.attr('id') as is displayed in the alert, then create something in the handleDropEvent that says... HIDE all divs in .lawyers div, except those with a class equal to draggable.attr('id')

I've tried hacking it together but not getting the result I'm after

Hope it isnt too confusing, thanks for any advice

Answer 1

untested but your handleDropEvent should look similar to this...

function handleDropEvent(event, ui) {
    var draggable = ui.draggable;
    ui.draggable.position({
        of: $(this),
        my: 'center bottom',
        at: 'center bottom'
    });
    alert('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');

    //Add these lines:
    var lawyers = $('.lawyers .lawyer');
    lawyers.not('.'+draggable.attr('id')).hide();
    lawyers.filter('.'+draggable.attr('id')).show();
}

here is a working fiddle: http://jsfiddle.net/g30rg3/c3Dt9/1/

Answer 2

Check this page:

http://api.jqueryui.com/droppable/#event-drop

Hmm - i usually have the droppable area named droppable ...

Think it will be something like this:

$( ".droppable" ).droppable({
  drop: function( event, ui ) 
{
$( ".blackBox" ).addClass('hideBox');
}

});

Then use the hideBox class that has now appended itself to blackBox to hide??

Check the info in that link though i think it might be what you need. Or pop it into codepen so people can play :)

Answer 3

You just have to add

$('.lawyers').not('.' + draggable.attr('id')).hide();

after the ui.draggable.position command.