javascript - jquery ui draggable 自动改变宽度

Question

我正在关注 jquery ui docs使 div 可拖动和可排序。它确实适用于拖动和排序。但是，当我将 div 从可拖动变为可排序时，可拖动的宽度会发生变化，并且不会保留其应有的宽度。

这是 demo

js:

$(function() {
    $('#grid-main_content').sortable({
        revert:true
    });

    $('#block-list .block').draggable({
        connectToSortable: '#grid-main_content',
        helper: 'clone',
        revert:'invalid'
    });
})

如果我检查我拖动到可排序的元素，我可以看到内联样式被赋予了具有宽度的可拖动 block (通过 jquery)。

如何保持 block 已有的样式？谢谢。

Answer 1

您可以使用 draggables' start event , 维护助手

的特定风格

$('#block-list .block').draggable({
    connectToSortable: '#grid-main_content',
    helper : 'clone',
    revert : 'invalid',
    start  : function(event, ui){
        $(ui.helper).addClass("ui-helper");
    }
});

CSS:

.ui-helper {
    width: 100% !important;
}

Demo