jquery ui draggable自动更改宽度

Question

我正在通过jquery ui docs来使div成为可拖动和可排序的.它确实适用于拖动和排序.但是当我从可拖动的div中取出div时,draggable的宽度会改变,并且不会保留它应该的宽度.

这是演示

JS:

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

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

如果我检查我拖动到sortable的元素,我可以看到一个内联样式被赋予一个带有宽度的可拖动块(通过jquery).

如何保持块已有的样式？谢谢.

Answer 1

您可以使用draggables' start事件来维护帮助程序的特定样式

$('#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;
}

演示

Answer 2

这对我有用。只需将其设置为可拖动元素的宽度即可

$('.selector').draggable({
   helper: 'clone',
   start: function(event, ui){
      $(ui.helper).css('width', `${ $(event.target).width() }px`);
   }
})

这样你就不用添加 CSS