/    Sign up×
Community /Pin to ProfileBookmark

Drag/drop problem (draggable in position:relative parent)

Here’s the scenario, I’m using prototype and scriptaculous, but I believe jquery would have the same issue. I have a list draggable images in a relatively positioned div. The problem is I can’t drag the images out of the parent div… well… you can, they’re just not visible. If you remove the position:relative on the parent div, it works just fine, I can drag items out of the div perfectly. However because of this little IE7 bug: [url]http://snook.ca/archives/html%5Fand%5Fcss/position%5Frelative%5Foverflow%5Fie/[/url] that position:relative is required. IS there another work around to this bug that does not require setting position?

I’ve tried playing with z-index and everything I can think of to no avail. Here’s the CSS for the box:

[CODE]
#products{
width: 680px;
height: 400px;
border: 1px solid gray;

/*background-color: #66FF00;*/
overflow-y: scroll;
overflow-x: hidden;

font-family:”Helvetica Neue”,”Helvetica”;
font-size:12px;
font-weight:bold;

position: relative;
}[/CODE]

If you would like to see this bug in action, you can visit it here: [url]http://twinmed-dev.com/template_add.php[/url]. Try searching for an item like “gloves” then adding it to the cart below. Thanks for any help.

Edit: Does anyone know if jQuery behaves the same way? If not I might just migrate this page over…

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@TeufelAug 18.2009 — When you dragdrop an item, its position will become absolute.

There is this little CSS trick that absolute items in a relative container will always be within that container - you can't drag them out.

My suggestion: While dragging the item, disable relative for the container, when done dragging, re-enable. You might write some loops for IE, though.
Copy linkTweet thisAlerts:
@bejitto101authorAug 19.2009 — Awesome, your suggestion worked perfectly.
×

Success!

Help @bejitto101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...