Question

I have a question for the jQuery gurus among you.

Scenario

I’m building a web app that (among other things) allows users to sort cards inside of large table. One feature of this table is a bin that is fixed to the top of the table, but “pinned” to the rows at the same time. It allows users to place cards in a bin that associated with a column, but not a row.

Here is a stripped down jsFiddle example (which was a pain to make) to show you what I mean.

Problem

The problem is, if you scroll down a ways in the table and then try to drag a card from table into the bin, it doesn’t usually work. What happens instead is that card gets placed in the table cell “behind” the bin that the user can’t see. Hope that makes sense.

Question and Plan of Attack

I’m thinking the best way to solve this issue is to somehow disable dropping in all of the cells in the table except the bin as soon as the user mouses over the bin. That way the card will be sure to land in the bin and not in the table cell behind the bin.

Do you agree? Is there a better way to fix the problem?

Notes

You may see my implementation and wonder why I’m implementing things the way I am. (Such as why I’m using table cells instead of divs for the bin, the top row, and the left column.) Unfortunately, I can’t completely explain why I chose the implementation I did, but realize I am operating under a number of constraints this example does not show. So… I’m open to advice on how to improve the layout, but please don’t answer this question with “Well, why don’t you set things up this ‘this’ way instead and then you won’t have to deal with the issue, because odds are your suggested setup won’t work for me for some reason.

Let me know if I need to clarify anything. Thanks a ton to anyone who answers!

Answer 1

This would do (fiddle):

$('#binRow').mouseenter(function() {
    $('tr:not("#binRow") td.card-holder')
        .removeClass('card-holder')
        .addClass('disabled-card-holder');
}).mouseleave(function() {
    $('.disabled-card-holder')
        .removeClass('disabled-card-holder')
        .addClass('card-holder');
});​