抱歉,大家...我没有时间进一步解释,因为我们已经接近死路了。
这是我正在使用的:
有三个带有“.groupWrapper”类的div,#listaUno #listaDos #listaInicial。有两种不同宽度的div模块,都向左浮动,基本上分别为167x159和342x159,并且容器#listaUno具有346px的固定宽度(可以容纳两个小模块或一个大模块),而#listaDos则有690px(最多可容纳四个小模块)。
使用jQuery-UI中的Sortables..
$(document).ready(function(){
if ($.browser.msie) {
$("img.iconico").attr("src", function() {
valor = this.src.replace(".png",".gif");
return valor;
});
}
$(".groupWrapper").sortable({
connectWith: '.groupWrapper',
items: 'div',
scroll: true,
opacity: 0.6,
receive: function(event, ui) { hemosCambiado(); }
});
$(".groupWrapper").disableSelection();
});
function init() {
$(".groupWrapper").sortable({
connectWith: '.groupWrapper',
items: 'div',
scroll: true,
opacity: 0.6,
receive: function(event, ui) { hemosCambiado(); }
});
$(".groupWrapper").disableSelection();
};
function hemosCambiado() {
var obj;
elemListaUno = $('#listaUno div').size();
elemListaDos = $('#listaDos div').size();
elemListaInicial = $('#listaInicial div').size();
anchoLista1 = $('#izquierda').width();
anchoLista2 = $('#caja-modulos2').width();
anchoElems1 = 0;
$('#listaUno div').each( function(i,elem) {
anchoElems1 += $(elem).width();
});
if((elemListaUno>2) || (anchoElems1>anchoLista1)){
$('#listaInicial').append($('#listaUno div:last-child'));
}
anchoElems2 = 0;
$('#listaDos div').each( function(i,elem) {
anchoElems2 += $(elem).width();
});
if((elemListaDos>4) || (anchoElems2>anchoLista2)){
$('#listaInicial').append($('#listaDos div:last-child'));
}
$(".groupWrapper").sortable( 'refresh' );
init();
}
这在FireFox、IE7、Safari等浏览器上运行得非常好...但在IE6上,被拖动的元素会在其他页面元素下面跳动,或者与鼠标链接但距离鼠标500像素,还有其他混乱的问题...