I’m creating a drag and drop interface for a web application – the boxes from the bottom section need to be dragged and dropped into the top section. This is working fine, however the part I’m struggling with is stopping the bottom section from scrolling back up when I scroll down and drag a box from lower down. For example, scroll the bottom section all the way to the bottom and then drag one of the boxes into the top section. The bottom section scrolls all the way up before allowing me to drop into the top section.
Does anyone know of a way to prevent this?
Here’s a JSFiddle: http://jsfiddle.net/FyPMF/1/
Many thanks for any help!