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

Question

在这种情况下，我使用的是原型和脚本语言，但我相信jquery会有同样的问题。 我在相对定位的div中有一个可拖动图像列表。 问题是我无法将图像拖到父div之外...好吧...可以，它们只是不可见。 如果删除父div上的position：relative，它就可以正常工作，我可以将项目完美地拖出div。 但是，由于这个小IE7错误： http : //snook.ca/archives/html_and_css/position_relative_overflow_ie/该position：relative是必需的。 是否有其他不需要设置位置的错误可以解决？

我已经尝试过使用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和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）注意在“开始效果”末尾容器样式丢失。 光标和宽度只是为了保持拖动用户友好而已。

希望对您有所帮助。

您的尼古拉斯