Dragging objects and hidden overflows
Hopefully this is fairly straight forward, but I've run into a bit of a fix.
I'm making a simple map, where users create a grid of up to 99x99, can make icons, and can drag/drop the icons onto the map. I've got the dragging/dropping working fine, so this is more about refining it.
So when an icon is created, its placed into a div called "iconbox". Its at a z-index of 0. The map is made up of a containing div with 3 divs inside: column headers, row headers, and the map itself. Within each of the 3 divs is a second div inside. The outer div has a fixed height/width with a hidden overflow, with the inner being absolutely positioned. I then have a set of arrow controls so when someone clicks on an arrow it moves the map.
So I can place the map icon onto the map no problem. The issue is that when I want to move the icons from the map back to the iconbox, because the inner map div has a hidden overflow, when you drag the icon off the map, it doesn't show. I thought to create a temporary box the icon can rest in while its being moved, but that doesn't really work out either, as it changes its position relative to the mouse, making it jump all over the place (plus creating a space that makes the vertical scrollbar jump around).
I'm hoping someone might know a technique I can use to move the icon's location without moving its position, allowing it to appear when dragged outside the map, or if I'm just kinda screwed for what I want to do.