Question

我正在创建一个简单的拖放布局，其中包含4列，并在定位时使用CSS缓动效果。我尝试了多种解决方案，但没有解决问题。最终这将是一个angularjs应用程序。

继承JSfiddle（这是四列，因此展开浏览器以查看整个布局）

当您拖动模块时，您会注意到有时它会让您捕捉到网格并显示＆＃34;占位符＆＃34;有时它不会赢。
有时＆＃34; .placeholder＆＃34;这是＆＃34; .marker＆＃34;在我的例子中，随机将.marker div放在包含li元素之上，导致这种情况发生。

有没有办法强制元素始终位于父ul的所有li项的底部元素上？

任何帮助将不胜感激！

var stylesheet = $('style[name=impostor_size]')[0].sheet;
var rule = stylesheet.rules ? stylesheet.rules[0].style : stylesheet.cssRules[0].style;
var setPadding = function(atHeight) {
    rule.cssText = 'border-top-width: '+atHeight+'px'; 
};

$('.button-up').click(function(){
    updateWidgetData();
});

$('.main-area ul').sortable({
    connectWith: '.column',
    cursor: 'move',
    placeholder: 'marker',
    forcePlaceholderSize: true,
    opacity: 0.4,
    start: function(event, ui){
        setPadding(ui.item.height());
    },
    stop: function(event, ui){
        ui.item.css({'top':'0','left':'0'}); //Opera fix
        if(!$.browser.mozilla && !$.browser.safari)
            updateWidgetData();
        var next = ui.item.next();
        next.css({'-moz-transition':'none', '-webkit-transition':'none', 'transition':'none'});
        setTimeout(next.css.bind(next, {'-moz-transition':'border-top-width 0.1s ease-in', '-webkit-transition':'border-top-width 0.1s ease-in', 'transition':'border-top-width 0.1s ease-in'}));
    }
}).disableSelection();


function updateWidgetData() {
    var items = [];
    $('.column').each(function() {
        var columnId=$(this).attr('id');
        $('.dragbox', this).each(function(i) {
            var item = {
                id: $(this).attr('id'),
                order : i,
                column: columnId
            };
            items.push(item);
        });
    });
    var sortorder = { items: items };
    //Pass sortorder variable to server using ajax to save state
    $.post('updatePanels.php', 'data='+$.toJSON(sortorder), function(response) {
        if(response=="success")
            $("#console").html('<div class="success">Saved</div>').hide().fadeIn(1000);
        setTimeout(function() {
            $('#console').fadeOut(1000);
        }, 2000);

    });
}

jQuery UI可拖动/可排序4列w / CSS转换 - 不稳定行为

0 个答案: