Question

这是场景，我正在使用原型和scriptaculous，但我相信jquery会有同样的问题。我在相对定位的div中有一个列表可拖动的图像。问题是我不能将图像拖出父div ...好吧......你可以，它们只是不可见。如果你删除父div上的位置：relative，它可以正常工作，我可以完美地将项目拖出div。但是由于这个小IE7错误：http://snook.ca/archives/html_and_css/position_relative_overflow_ie/该位置：相对是必需的。还有另外一个解决这个不需要设置位置的bug吗？

我尝试过使用z-index和我能想到的一切都无济于事。这是盒子的CSS：

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

如果您希望在操作中看到此错误，可以在此处访问：http://twinmed-dev.com/template_add.php。尝试搜索“手套”之类的项目，然后将其添加到下面的购物车中。谢谢你的帮助。

Answer 1

我认为溢出隐藏/滚动属性比位置更伤害你：相对是 - 但它只是一个想法。

Answer 2

拖动项目时，其位置将变为绝对位置。有一个小的CSS技巧/错误，相对容器中的绝对项目将始终位于该容器中 - 您无法将它们拖出来。

我的解决方案：拖动项目时，禁用容器的相对，完成拖动后重新启用。

Answer 3

这是我写的在IE 8.0.6＆amp; Firefox 3.6.3：

使width:100px;overflow:auto中的元素（带边框）可拖动容器：

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({});

}

重要说明：（1）重复z-index（2）注意'starteffect'结束时容器丢失的样式。光标和宽度只是为了保持拖动用户友好。

我希望它有所帮助。

此致，尼古拉斯

拖放问题（可拖动到位：相对父级）

3 个答案: