please help! i can sort items to hidden overflow!

This is my site. On the left I have a playlist, inside a container with hidden overflow (the playlist is a sortable). The playlist grows as you drag more songs to it from the search list.

The problem is that when you drag many songs to the playlist, and the playlist is larger than the container, it makes a situation where I can sort the playlist by dragging items to the hidden开发者_运维百科 area. In other words, I can drag a song from the playlist to an area under the container (where the invisible part of the playlist is) and the song will still be inserted to the list.

Here's a screenshot:

Good question. But yes, that would be the expected behavior. I can only think of a 'hacky' solution to the problem, which would be to place an invisible div element with a very high z-index over the part where you don't want dropping to take place. This should provide a pragmatic solution to your problem, but it isn't pretty.

In fact, a reasonably good solution would be to add that invisible element dynamically as soon as the drag action starts, so as to stop the user from dropping there. When the drag stops, you can remove it again.

Update Ok, so learning that the first try doesn't work, I went to have a look at the jQuery docs. They specify a containment option, which is an element in which the sorting should be contained. So I'd say you can do the invisible element thing again, but this time place it exactly on top of the area you want to be able to sort in. Then, specify this element in the containment option. If that doesn't work, I'm out of advice ;)