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

下面是一个场景，我使用prototype和scriptaculous，但我相信jquery也会有同样的问题。我在相对定位的分区中有一个可拖动的图像列表。问题是我无法将图像从父分区中拖动出来。。。好。。。你可以，只是看不见而已。如果删除父div上的position:relative，效果很好，我可以完美地将项目拖出div。然而，由于IE7的这个小错误：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;
}

---

如果您希望看到此bug的运行，可以在此处访问它：。尝试搜索“手套”之类的物品，然后将其添加到下面的购物车中。感谢您的帮助。

我认为溢出隐藏/滚动属性对您的伤害大于位置：相对-但这只是一个想法。

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

---

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

以下是我编写的使其在IE 8.0.6和Firefox 3.6.3下运行的内容：

使

宽度：100px中的元素（带边框）可拖动；溢出：自动

容器：

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索引（2）注意“startefect”末尾的容器样式丢失。光标和宽度只是为了方便用户拖动

我希望有帮助

你的，

---

Nicolas

在您的右侧，溢出必须设置为可见或根本不设置。