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: / 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:

#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;
}

If you would like to see this bug in action, you can visit it here: .php. Try searching for an item like "gloves" then adding it to the cart below. Thanks for any help.

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: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/ 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:

#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;
}

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

• javascript
• jquery
• css
• prototypejs

3 Answers 3

I would think the overflow hidden/scroll properties are hurting you more than the position: relative is - but its just an idea.

When you drag an item, its position will bee absolute. There is this little CSS trick/bug that absolute items in a relative container will always be within that container - you can't drag them out.

My solution: When dragging the item, disable relative for the container, when done dragging, re-enable.

Here is what I wrote to have it running under IE 8.0.6 & Firefox 3.6.3:

Make draggable the elements (with border) in the width:100px;overflow:auto container:

function makeDraggable(container,tag) {

  if(!container || !tag) { return false; }
  $(container).select(tag).each( function(o) {
   new Draggable(o,{
        starteffect: function(e){makeDragVisible(container,e);},
        endeffect: function(e){e.setStyle({'position':'','width':'','cursor':''});},
        zindex: 1000
  // , revert: ... // the other options
  });
});

}

function makeDragVisible(container,element) {

    if(!container || !element) { return false; }
        var i=$(container).getStyle('width');
        i=i.replace('px','');
        i=Math.round(i-20)+'px';
        element.setStyle({'width':i,'z-index':1000,'position':'absolute','cursor':'move'});

    $(container).setStyle({});

}

Important notes: (1) the z-index is repeated (2) notice the container loss of style at the end of 'starteffect'. Cursor and width are simply there to keep the drag user friendly.

I hope it helps.

Yours, Nicolas