Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,546
    Thanks
    45
    Thanked 259 Times in 256 Posts

    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.

  • #2
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,546
    Thanks
    45
    Thanked 259 Times in 256 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •