Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-07-2012, 01:54 AM   PM User | #1
Keleth
Senior Coder

 
Join Date: Jun 2008
Location: New Jersey
Posts: 2,354
Thanks: 45
Thanked 247 Times in 244 Posts
Keleth is on a distinguished road
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.
Keleth is offline   Reply With Quote
Old 05-07-2012, 03:34 PM   PM User | #2
Keleth
Senior Coder

 
Join Date: Jun 2008
Location: New Jersey
Posts: 2,354
Thanks: 45
Thanked 247 Times in 244 Posts
Keleth is on a distinguished road
So I actually did solve this, though maybe not in the best way (if someone has further suggestions, I'm all ears). I created a copy of the element the icon is dropped into into the parent map div, and move it to be exactly where the original container was, and moved the icon into that copy on dragstart. As the parent container doesn't have a hidden overflow, it shows up when you move it outside the map, and since the container has the same top/left coords as the containing div, the icon didn't jump when it was picked up.

I feel like its an iffy solution, so if there are better ones, please do let me know!
Keleth is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:24 PM.


Advertisement
Log in to turn off these ads.